JavaScript 事件监听 addEventListener

addEventListener()的工作原理是将实现EventListener的函数添加到调用它的EventTargrt上的指定事件类型的事件侦听器列表中。

1、事件监听  addEventListener (IE8及以下有兼容问题)

语法：ele.addEventListener(event_type , function ,布尔值(是否启用事件捕获去触发事件))

　　1. 第一个参数是事件的类型（比如"click"鼠标单击事件）；

　　2. 第二个参数是在事件发生时我们要调用的函数；

　　3. 最后一个参数为可选参数，不写时默认false(即事件冒泡)。

　【注意】事件监听中，请勿对事件类型event_type使用 "on" 前缀。比如要使用 "click" 代替 "onclick"。

    <button id="btn">点我一下试试</button>
    <script>
        var btn_ele = document.getElementById("btn");
        btn_ele.addEventListener("click" , function(){
            alert("事件监听，你点击了按钮");
        });
    </script>

2、移除监听 removeEventListener

语法：ele.removeEventListener(事件类型,function)

---

传统事件绑定（DOM0）和事件监听器绑定（DOM2）的区别

    <button id="btn">点我一下试试</button>
    <script>
        var btn_ele = document.getElementById("btn");

        // 事件绑定
        btn_ele.onclick = function(){
            alert("事件绑定，你点击了按钮");
        }
        // 事件监听
        btn_ele.addEventListener("click" , function(){
            alert("事件监听，你点击了按钮");
        });
    </script>

DOM0 事件绑定

1.一个元素上只能有一个事件处理函数，容易删除;

        btn_ele.onclick = function(){
            alert("事件绑定，你点击了按钮");
            // 想让事件只执行一次，添加下面这句话即可
            btn_ele.onclick = null;
        }

　　缺点：事件处理函数难以分割，存在覆盖问题，容错率低。

        btn_ele.onclick = function(){
            alert("事件绑定，你点击了按钮1");
        }
        btn_ele.onclick = function(){
            alert("事件绑定，你点击了按钮2");//只弹出2，2把1覆盖了
        }

2.onclick的事件触发顺序是不可改变的，只能以冒泡的顺序进行传播。

        btn_ele.onclick = function(){
            alert("button事件绑定，你点击了按钮");
        }
        document.onclick = function(){
            alert("document事件绑定，你点击了按钮");//冒泡：从里到外触发，先触发button、再触发document的
        }

----------------------------------------

DOM2 事件监听

1. 允许向一个元素添加多个相同事件，同时不覆盖已有事件；

　　即一个事件可以存着多个事件处理函数，容错率更高。

        btn_ele.addEventListener("click" , function(){
            alert("事件监听，你点击了按钮1");
        });
        btn_ele.addEventListener("click" , function(){
            alert("事件监听，你点击了按钮2");//点一次按钮，会弹窗两次，即1和2
        });

　　向一个元素添加不同类型的事件当然也允许啦。

2. 删除监听时，需要用到API   removeEventListener()；

        btn_ele.addEventListener("click" , function(){
            alert("事件监听，你点击了按钮");
            // arguments.callee代表当前函数
            btn_ele.removeEventListener("click" , arguments.callee);
            // 此时 监听在执行一次后被删除
        });

　　考虑到严格模式禁用callee属性，我们可以将单独函数提出来：

        btn_ele.addEventListener("click" , clickHandler);
        function clickHandler(){
            "use strict"
            alert("事件监听，你点击了按钮");
            btn_ele.removeEventListener("click" , clickHandler);
        }

3. 事件监听可以改变事件流的触发顺序；

　　　——第3个参数为true时事件捕获，false时事件冒泡

        btn_ele.addEventListener("click" , function(){
            alert("button事件监听，你点击了按钮");
        },true);
        document.addEventListener("click" , function(){
            alert("document事件监听，你点击了按钮");
        },true);
        // true为事件捕获，从外往里逐个触发。即先触发document，再触发button

冒泡和捕获是事件传播的2种方式

　　事件冒泡，是事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。浏览器默认事件冒泡。

　　简单来说，事件冒泡是由内向外的事件传播方式，而事件捕获是从外往里逐个触发。

---

事件监听的主动触发  dispatchEvent() 

API: dispatchEvent(event); 在对应的元素上触发一个事件

1. 创建一个新的事件对象; var e = new Event("event_type");

2. 触发事件 : dispatchEvent(e) ;

        btn_ele.addEventListener("click" , function(){
            console.log("btn_ele 事件监听主动触发")
        });
        // btn_ele.onclick();//无法触发onclick。报错btn_ele.onclick is not a function
        // 如何主动触发？
        // 自己创建一个事件对象，去触发这个事件处理函数
        var e = new Event("click");
        // btn_ele.dispatchEvent(e);
        // 如果是类似轮播图效果 可以加定时器
        setInterval(function(){
            btn_ele.dispatchEvent(e);
        },1000)

　　　　　　　　

---

 

监听器的兼容问题

　　IE8及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。

　　不过，对于这些特殊的浏览器版本，可以使用 attachEvent() 方法向元素添加事件处理程序，并由 detachEvent() 方法删除。

　【注意】使用attachEvent时，事件类型要加"on"前缀。

下面是事件监听的兼容写法：

        // IE8的监听器写法
        // document.attachEvent("onclick" , function(){
        //     alert("hello world");
        // });
        // 移除监听是detachEvent
        
        // 兼容写法如下
        // 事件监听 : 
        function on( ele , type , callback ){ 
            if(typeof ele.addEventListener === "function"){
                ele.addEventListener( type , callback );
            }else{
                ele.attachEvent("on" + type , callback);
            }
        }
        // 移除监听 : 
        function off( ele , type , callback ){
            if(typeof ele.removeEventListener === "function"){
                ele.removeEventListener( type , callback );
            }else{
                ele.detachEvent("on" + type , callback);
            }
        }