javascript事件

Posted 2021-02-03 天边飞来的鸟

html

<div id="dv1">
    <div id="dv2">
        <div id="dv3"></div>
    </div>
</div>

给每个div绑定一个点击事件，在控制台输出当前的id值，js代码

document.getElementById(‘dv1‘).addEventListener(‘click‘, function() {
  console.log(this.id);
}, false);

当点击最里层dv3的时候，控制台会依次输出

dv3
dv2
dv1

事件触发的顺序会依次由里向外，这就是事件冒泡。

 

当addEventListener()函数中的第三个参数值为true的时候，上边的代码依次输出的值为dv1 dv2 dv3，顺序是由外向里，这是事件捕获。

 

在点击事件处理函数中，自带了一个事件对象参数event，对象中有一个属性值event.eventPhase

值为1时-->捕获阶段

值为2时-->目标阶段

值为3时-->冒泡阶段

 

阻止事件冒泡

若想在dv2中阻止事件冒泡，即点击dv3时，控制台只输出dv3 dv2，则在dv2的点击事件处理函数中添加event.stopPropagation(fnName)

参数fnName为处理事件的函数名（在处理事件的时候就必须使用一个命名函数）。

 

以上的函数都只针对Chrome、Firefox，若是低版本的IE浏览器（比如IE8），则使用的函数是

绑定事件：attachEvent()

解除事件：detachEvent()

阻止冒泡：window.event.cancelBubble = true;