- 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()
阻止冒泡: Windows.event.cancelBubble = true;
来源: http://www.bubuko.com/infodetail-2921246.html