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的事件绑定只能添加一个方法，如果添加多个的话前面的时间会被后面的时间覆盖。