zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    PHP扫描图片转点阵 二维码转点阵
    PHP设计模式之观察者模式
    Vue router 使用 History 模式导致页面请求 404
    MySQL(Oracle)模糊查询 使用 instr () 替代 like 提升效率
    jmeter压测小白常见问题解决
    mac上批量启动appium,并把appium日志打印到指定文件夹
    批量启动appium-server+java
    启动appium常用参数解析
    TestNg执行时报org.testng.TestNGException: org.xml.sax.SAXParseException异常解决
    解决启动appium 提示端口被占用问题
  • 原文地址:https://www.cnblogs.com/zhang-wang/p/6237365.html
Copyright © 2011-2022 走看看