当先锋百科网

首页 1 2 3 4 5 6 7

JS事件监听器 

1.传统事件绑定
    1.重复添加事件会覆盖
    2.不能精确的删除事件上的某一个函数
2.事件监听器(给某个按钮需要绑定多个函数，精确删除) 低版本IE浏览器不兼容
    addEventListener()
        格式：node.addElementListener("click")
        参数：
            第一个参数  事件类型
            第二个参数  绑定函数
            第三个参数  布尔值  true   事件捕获
                               false  事件冒泡  默认   
    
    removeEventListener()
        格式：node.removeEventListener()
        参数
            第一个参数：事件类型
            第二个参数  删除函数名字
3.低版本函数
    attachEvent()和detachEvent()

例子1：
1.传统的事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oBtn1 = document.getElementById("btn1");
            oBtn1.onclick = function(){
                alert("点击");
            }
            oBtn1.onclick = function(){
                alert("点击2");
           }
        }
    </script>
</head>
<body>
    <button id="btn1">点击</button>
</body>
</html>

运行结果： 可以看到重复添加事件，后面是事件会覆盖前面的事件
在这里插入图片描述
2.用事件监听器绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oBtn1 = document.getElementById("btn1");
            oBtn1.addEventListener("click",function(){
                alert("点击1");
            },false);
            oBtn1.addEventListener("click",function(){
                alert("点击2");
            },false);
        }
    </script>
</head>
<body>
    <button id="btn1">点击</button>
</body>
</html>

运行结果： 可以看到添加事件监听器后事件被依次执行

在这里插入图片描述
例子二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var aBtns = document.getElementsByTagName("button");
            // 传统写法
            /* aBtns[1].onclick = function(){
                alert("原有的点击函数");
            }

            //下标为0
            aBtns[0].onclick = function(){
                aBtns[1].onclick = show;
            }

            //取消下标为1按钮上的函数
            aBtns[2].onclick = function(){
                aBtns[1].onclick = null;
            } */

			//事件监听写法
            aBtns[1].addEventListener("click",function(){
                alert("原有的点击函数");
            },false);

            aBtns[0].onclick = function(){
                aBtns[1].addEventListener("click",show,false);
            }

            aBtns[2].onclick = function(){
                aBtns[1].removeEventListener("click",show);
            }
            function show(){
                alert("hello world");
            }
        }
    </script>
</head>
<body>
    <button>添加函数</button>
    <button>按钮</button>
    <button>删除函数</button>
</body>
</html>

运行结果对比：
1.传统写法
在这里插入图片描述
2.事件监听写法
在这里插入图片描述

拓展：

 //事件监听器的兼容
 function addEvent(node,evenType,funcName){
     if(node.addEventListener){
         node.addEventListener(evenType,funcName,false);
     }else{
         node.attachEvent("on" + evenType,funcName);
     }
 }

 function removeEvent(node,eventType,funcName){
     if(node.removeEventListener){
         node.removeEventListener(eventType,funcName);
     }else{
         node.detachEvent("on" + eventType , funcName);
     }
 }