Js 事件侦听和删除

事件侦听

• addEventListener : 非 IE 7 8 下使用
• 语法： 元素.addEventListener('事件类型'， 事件处理函数， 冒泡还是捕获)

要点：

1. 侦听事件函数不能带入参数；
2. 侦听事件函数有且仅有一个参数e,就是事件接收到事件对象，其他函数没有；
3. 事件函数不能写return 返回值，但是可以用return跳出，不再执行下去；

   <button id="bn0">按钮</button>
   <script>
        var bn=document.querySelector("button");
        bn.addEventListener("click",clickHandler1);
        bn.addEventListener("click",clickHandler2);
            
        function clickHandler1(e){
            num++;
            console.log("aaa");
            if(num>1){
                // this是事件侦听的对象
                // e.currentTarget.removeEventListener("click",clickHandler1);
                //将clickHandler1事件移除
                this.removeEventListener("click",clickHandler1);
            }
        }

        function clickHandler2(e){
            // console.log("bbb");
            console.log(e.type)
        }
        
   </script>

注意：

- 当你点击 bn 的时候，两个函数都会执行，并且会按照你注册的顺序执行
- 当元素的事件不再使用时，必须删除，否则会造成内存堆积，侦听事件都会被存储在堆中
- 当元素被删除了，也必须删除该元素的所有事件

• attachEvent ：IE 7 8 下使用
• 语法： 元素.attachEvent('事件类型'， 事件处理函数)

bn.attachEvent('onclick', function () {
 console.log('我是第一个事件')
})
​
bn.attachEvent('onclick', function () {
 console.log('我是第二个事件')
})

当你点击 bn 的时候，两个函数都会执行，并且会按照你注册的顺序倒叙执行
先打印 我是第二个事件 再打印 我是第一个事件
注意： 事件类型的时候要写 on，点击事件就行 onclick

两个方式的区别

• 注册事件的时候事件类型参数的书写

addEventListener ： 不用写 on
attachEvent ： 要写 on
-参数个数
addEventListener ： 一般是三个常用参数
attachEvent ： 两个参数
-执行顺序
addEventListener ： 顺序注册，顺序执行
attachEvent ： 顺序注册，倒叙执行
-适用浏览器
addEventListener ： 非 IE 7 8 的浏览器
attachEvent ： IE 7 8 浏览器

addEventListener() 和 onclick的区别：

• onclick不能同时执行两个函数，addEventListener()可以执行两个不同的函数；
• 移除事件侦听的方式不同

document.onclick=function(){
	document.onclick=null;//移除事件侦听
        console.log("a")
}
//事件会覆盖上面的事件
document.onclick=function(){
    console.log("b");
}

document.addEventListener("click",clickHandler1);
document.addEventListener("click",clickHandler2);
function clickHandler1(e){
	//移除事件侦听
	document.removeEventListener("click",clickHandler1);
        console.log("a");
}
function clickHandler2(e){
           //不会覆盖上面的事件
          console.log("b")；
}

• 事件匿名函数的不断迭代就会造成回调地狱，而使用事件注册时用的是命名函数就会减少造成回调地狱

// 事件匿名函数的不断迭代就会造成回调地狱
document.onclick=function(){
    var bn=document.querySelector("button");
    bn.onclick=function(){
        console.log("aaa");
    }
}

注意：以后写函数就不使用匿名函数

• addEventListener可以在捕获阶段和冒泡阶段触发，而onclick只能冒泡阶段触发

 document.body.addEventListener("click", clickHandler);//冒泡阶段执行
 document.body.addEventListener("click", clickHandler,true);//捕获阶段执行

• onclick支持IE低版本，addEventListener不支持IE8一下，低版本的IE使用 attachEvent 进行事件侦听；使用 detachEvent 移除事件侦听。

document.attachEvent("onclick",clickHandler);//IE8及以下使用，其他版本和其他浏览器不支持
function clickHandler(e){
    console.log("aaa");
    document.detachEvent("onclick",clickHandler);//移除事件侦听
}

事件侦听和移除的兼容写法：

function addEvent(elem,type,eventHandler){
    try{
        elem.addEventListener(type,eventHandler);
    }catch(e){
        elem.attachEvent("on"+type,eventHandler);
    }
}

function removeEvent(elem,type,eventHandler){
    try{
        elem.removeEventListener(type,eventHandler);
    }catch(e){
        elem.detachEvent("on"+type,eventHandler);
    }
}

addEvent(document,"click",clickHandler);
function clickHandler(){

}

高级版：事件侦听

js部分

        //获取元素
        var bn0=document.getElementById("bn0");
         //绑定事件
        on(bn0,"click",clickHandler);

        function clickHandler(e){
            console.log(e);
        }
        
         //侦听事件
        function on(target,type,handler){
            var b=judgeBrowser("IE");
            if(b && Number(b)<9){
                target.attachEvent("on"+type,handler);
            }else{
                target.addEventListener(type,handler);
            }
       }
         /* 
        
            获取浏览器和版本

            通过浏览器打开，会返回当前浏览器名和版本号
            return 
                数组   [浏览器:String,浏览器版本号:String]
        
         */
        function getBrowserRV(){
            var str=navigator.userAgent;
            // 判断是否是Chrome
            if(str.indexOf("Chrome")>-1){
                var index=str.indexOf("Chrome");
                return str.slice(index,str.indexOf(" ",index+1)).split("/");
            }
             // 判断是否是Firefox
            if(str.indexOf("Firefox")>-1){
                var index=str.indexOf("Firefox");
                return str.slice(index).split("/");
            }
            // 判断是否是IE11
            if(str.indexOf("rv:")>-1 && str.indexOf("Trident")>-1){
                return ["IE","11"];
            }
            // 判断是否是IE10及以下
            if(str.indexOf("Trident")>-1){
                var index=str.indexOf("MSIE");
                return ["IE",str.slice(index,str.indexOf(";",index)).split(" ")[1]];
            }
        }  

        
        //判断浏览器版本
         function judgeBrowser(browser){
            var arr=getBrowserRV();
            if(browser.toLowerCase()===arr[0].toLowerCase()){
                return arr[1];
            }else{
                return false;
            }
        }