js监听事件的绑定事件与移除事件

监听事件的绑定和移除主要是addEventListener和removeEventListener的应用

addEventListener语法

---

element.addEventListener(type，handler，false/true)

type:事件类型

handler:事件执行触发的函数

false/true:false为冒泡/ture为捕获，参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

事件捕获：父级元素先触发，子集元素后触发；

事件冒泡：子集元素先触发，父级元素后触发；

一般的绑定事件，都是采用冒泡方式，也就是使用false

 

removeEventListener语法

---

element.removeEventListener(type，handler，false/true)

参数值含义和上述一样。

 

接下来用例子进一步理解监听事件的绑定与移除

例1：事件的传播方式

  <div id="father">
        <div id="son"></div>
    </div>
    <script>
    //事件传播有两种方式
    //自下而上 从子级到父级是 事件冒泡
    //自上而下 从父级到子级是 事件捕获
    var son = document.getElementById("son");
    var father = document.getElementById("father");
    var arr = [son,father,document,document.body];
    for(var i=0;i<arr.length;i++){
        //传统方式绑定的事件 事件的传播顺序是冒泡顺序
        // arr[i].onclick = function(){
        //     console.log(this);
        // }
        //第三个参数useCapture如果是false时间的传播顺序是冒泡顺序
        // arr[i].addEventListener("click",function(){
        //     console.log(this);
        // },false);
        //第三个参数useCapture使用捕获事件的传播顺序是捕获顺序
        arr[i].addEventListener("click",function(){
            console.log(this);
        },true)
    }
    </script>

例2：过addEventListener（添加点击事件监听器）形式的绑定事件不会互相抵消，从而实现一个按钮控制多个事件。

<button id="btn1">按钮1</button>
    <button id="btn2">按钮2</button>
    <script>
    var btn1=document.getElementById("btn1");
    var btn2=document.getElementById("btn2");
    //传统方式
    btn1.onclick = function(){
        console.log("第一个");
    }
    btn2.onclick = function(){
        console.log("第二个");
    }
    //添加事件监听器
    //addEventListener  添加事件监听器
    //type listener uesCapture  事件类型  事件处理函数  使用捕获
    btn2.addEventListener("click",function(){
        console.log("第一个");
    },false);
    btn2.addEventListener("click",function(){
        console.log("第二个");
    },false);
    //通过添加事件监听器形式绑定事件不会相互抵消
    </script>

removeEventListener移出事件

    <button id="btn1">按钮1</button>
    <button id="btn2">按钮</button>
    <script>
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    //传统方式
    btn1.onclick = function(){
        console.log("第一个人");
    }
    btn1.onclick = function(){
        console.log("第二个人");
    }
    // btn1.onclick=null;
    //添加事件监听器
    //如果添加的事件处理函数将来想要移除就不能使用匿名函数的方式
    btn2.addEventListener("click",fn1,false);
    function fn1(){
        console.log("第二个人");
    }
    //移除事件监听器   
    btn2.removeEventListener("click",fn1,false);
    </script>