JS添加/移除事件

事件的傳播方式

    <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>

 

通過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>

移除事件

    <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>