addEventLister()方法

一、用法

用于向指定元素添加事件句柄。

二、语法

element.addEventLister(event,function,useCapture是否捕获)
参数值：

• event：必须，指定的事件名。不使用“on”，比如“click”
• function：必须，指定事件触发时执行的函数。
• useCapture：可选，布尔值，指定事件是否在捕获或者冒泡阶段执行。true - 事件句柄在捕获阶段执行，false - 默认 事件句柄在冒泡阶段执行。
  当浏览器不支持addEventLister()时，可以使用attachEvent()方法替代。

三、举栗子

    <div id="div1">
        <p id="p1">点击段落，我是冒泡，默认默认默认是从里到外处理事件的冒泡。</p>
    </div>
    <div id="div2">
        <p id="p2">点击段落，我是捕获</p>
    </div>

        document.getElementById("p1").addEventListener("click", function(){
            alert("你点击了 P 元素!");
        }, false);
        document.getElementById("div1").addEventListener("click", function(){
            alert("你点击了 DIV 元素!");
        }, false);
        document.getElementById("p2").addEventListener("click", function() {
            alert("你点击了 P 元素!");
        }, true);
        document.getElementById("div2").addEventListener("click", function() {
            alert("你点击了 DIV 元素!");
        }, true);

第三个参数：默认是false，冒泡阶段执行，从精确事件里面到冒泡到外面执行。true，捕获阶段执行，从模糊的外面开始执行到里面准确的事件。

四、补充--事件冒泡和捕获

1、冒泡事件：事件按照最准确的事件目标到不确定的事件目标（document对象）顺序触发（从里到外）。
div -> body -> document
2、捕获事件：事件从最不准确的对象（document对象）到最准确的对象顺序执行（从外到里）。
document -> body -> div
3、DOM事件流：同时支持两种事件类型，先执行捕获事件，在执行冒泡事件
document -> body -> div -> body -> document

盗用图，很清楚明了