zoukankan      html  css  js  c++  java
  • js的addEvertLIstener方法

    简介

    “DOM2级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener() 和 removeEventListener()。

    public override function addEventListener(type:String, listener:Function, useCapture:Boolean = false):void

    他们都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后一个布尔值参数如果是true,表示在事件捕获阶段调用事件处理程序;如果是false,表示在事件冒泡阶段调用事件处理程序。

    使用

    1.事件添加

    addEventListener 可以在一个元素上多次添加事件。

    复制代码
    var oDiv = document.getElementById("div1");
    
    oDiv.addEventListener("click",
    function() {
        alert(this.id);
    },
    false);
    
    oDiv.addEventListener("click",
    function() {
        alert("clicked me");
    },
    false);
    复制代码

    点击oDiv节点后,先输出节点id“div1”,再输出“clicked me”。

    2.事件移除

    addEventListener() 添加的事件处理程序只能使用 removeEventListener() 来移除;移除时传入的参数与添加处理程序时使用的参数相同。这也就意味着通过 addEventListener() 添加的匿名函数将无法移除。

    复制代码
    var oDiv = document.getElementById("div1");
    
    oDiv.addEventListener("click",
    function() {
        alert(this.id);
    },
    false);
    
    oDiv.removeEventListener("click",
    function() { 
        alert(this.id);
    },
    false); // 无效
    复制代码

    虽然 removeEventListener() 看似使用了相同的参数,但是实际上传入的那个是另一个完全不同的函数。所以如果想正确的移除事件,写法如下所示。

    复制代码
    var oDiv = document.getElementById("div1");
    
    var handler = function() {
        alert(this.id);
    }
    
    oDiv.addEventListener("click", handler, false);
    
    oDiv.removeEventListener("click", handler, false); // 有效
    复制代码

    讨论

    这里我们主要讨论 useCapture 参数的用法。首先看一段代码。

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="div1" style="background: blue; 100px; height: 100px;">
            <div id="div2" style="background: red; 70px; height: 70px;">
                <div id="div3" style="background: yellow; 50px; height: 50px;"></div>
            </div>
        </div>
        <script type="text/javascript">
            var oDiv1 = document.getElementById('div1'),
                oDiv2 = document.getElementById('div2'),
                oDiv3 = document.getElementById('div3');
    
            oDiv1.addEventListener('click', showBlue, true);
            oDiv2.addEventListener('click', showRed, false);
            oDiv3.addEventListener('click', showYellow, true);
    
            function showBlue(){ //蓝
                alert("blue");
            }
    
            function showRed(){ //红
                alert("red");
            }
    
            function showYellow(){//黄
                alert("yellow");
            }
        </script>
    </body>
    </html>
    复制代码

    点击div3之后,过程分为三个阶段:

    捕获阶段: 外-->里 在div1处检测useCapture属性为true,即事件捕获阶段会触发事件,所以会执行程序,输出“blue”。在div2处检测useCapture属性为false,即事件冒泡阶段才会触发,所以不会执行程序。
    目标阶段: 目标到div3处,发现div3就是鼠标点击的节点, 所以这里是目标阶段。若有事件处理程序,则执行该程序,输出“yellow”。这里不论 useCapture 为 true 还是 false。
    冒泡阶段: 里-->外 在div2处检测useCapture属性为false,即事件冒泡阶段才会触发,所以会执行程序,输出“red”。在div1处检测useCapture属性为true,即事件捕获阶段会触发事件,所以不会执行程序。

    程序的运行结果为:“blue”,“yellow”,“red”。

    对于addEventListener方法可以对一个dom添加多个事件,而通过jquery的事件绑定只能添加一个方法,如果添加多个的话前面的时间会被后面的时间覆盖。

  • 相关阅读:
    Java+7入门经典 -1 简介
    优化算法动画演示Alec Radford's animations for optimization algorithms
    如何写科技论文How to write a technical paper
    开始学习深度学习和循环神经网络Some starting points for deep learning and RNNs
    用500行Julia代码开始深度学习之旅 Beginning deep learning with 500 lines of Julia
    用10张图来看机器学习Machine learning in 10 pictures
    ICLR 2013 International Conference on Learning Representations深度学习论文papers
    ICLR 2014 International Conference on Learning Representations深度学习论文papers
    卷积神经网络CNN(Convolutional Neural Networks)没有原理只有实现
    卷积神经网络Convolutional Neural Networks
  • 原文地址:https://www.cnblogs.com/hbyzs/p/4459301.html
Copyright © 2011-2022 走看看