JS添加/移除事件

Posted 2020-08-25 东张西旺

事件的传播方式

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