关于JavaScript的addEventListener第三个

2017-06-02 本文已影响78人 Azur_wxj

Mozilla浏览器提供了一个JavaScript的绑定事件监听器的函数addEventListener

document.getElementById("button1").addEventListener("click",callback,isCapture);

其中各个参数说明如下：

"click" 代表注册的什么事件。“click”代表的自然是点击事件，注意前面不加“on”前缀。也可以是其他事件，去掉“on”前缀即可。
callback 回调函数，当事件被触发时调用该函数。
isCapture 是否在捕获阶段执行回调。默认为false。

下面来说一下第三个参数 isCapture。它是一个boolean类型的值。说到它就不得不提一下JavaScript中的事件触发经历的两个阶段：捕获阶段和冒泡阶段。

事件触发经历的两个阶段

从图中可见都是嵌套关系。我们假定点击了最内层的text元素，触发了它的onclick事件。
但是实际上因为是嵌套的原因，点击了最内层的text也相当于点击了它的父元素div，也相当于点击了父元素的父元素body……也相当于点击了window，那么如果这些外层元素也有onclick的点击事件，它们也应当被触发，现在的问题是，是在什么时候被触发？
图中可见有两个阶段

先从最外面开始（也就是window开始）向内推进，直到定位到触发的元素text。这一过程叫“捕获过程”。
然后从该元素开始，又向上级冒泡。该过程为“冒泡过程”。

显然，对于这个嵌套链上的每个元素，它的触发按数即可以在捕获阶段被执行，也可以在冒泡阶段被执行。

所以，addEventListener的第三个参数正是指定这个触发时段的。默认情况是false，也就是在冒泡阶段被执行；如果指派为true，则在捕获阶段被执行。

用一个简单的实验可以说明问题：
假设现在一个HTML界面有三个呈嵌套关系的元素

 <div id="outer" >
    <div id="middle" >
      <input type="button" id="inner" value="inner"/>
    </div>
 </div>

最外层是outer，中间是middle，内部是inner。
下面是三个元素绑定点击事件：

window.onload=function(){ 
    document.getElementById("inner").addEventListener("click",show("inner"),false); 
    document.getElementById("middle").addEventListener("click",show("middle"),false); 
    document.getElementById("outer").addEventListener("click",show("outer"),false); 
} 
function show(i){ 
    return function(){
        console.log(i);
    }
}

点击对应元素，就会在控制台打印出相应信息。下面分别修改三个boolean参数，观察输出结果

输出结果

OUTPUT的结果左边先打印，右边后打印。我们举两个结果说明：

isCapture分别被设置为TFF的时候，点击最内层inner的按钮，由于outer、middle设置的为false，那么它们在捕获阶段不会被触发，控制流到达inner，此时先输出inner，然后开始返回，也就是向上级冒泡，所以依次触发middle、outer。
isCapture分别被设置为TTF的时候，点击最内层inner按钮，由于outer设置为false，那么它在进入的阶段不会被触发，但是当遇到middle时候，因为是true，所以会被触发，先输出middle，然后输出inner，最后在返回的冒泡阶段，outer被触发，最后输出outer。

关于JavaScript的addEventListener第三个

猜你喜欢

热点阅读