事件冒泡与事件捕获

epoos

发布于 2022-06-06 08:06:05

1.7K00

代码可运行

文章被收录于专栏：epoos.comepoos.com

运行总次数：0

代码可运行

javascript 的事件捕获和事件冒泡之前一直没能弄明白，知道看到一个例子。利用丢一颗石头入水的例子，就能够非常形象了，如图所示：

事件捕获和事件冒泡就像是一颗石头(点击事件)投入水中：首先是最外层水面(html)接触(捕获)石头，然后石头下沉，内层的水(body/dom 父节点)捕获石头，直到池塘底部(目标节点)。当石头到达池塘底部(事件被捕获)之后，产生了一个气泡，然后就开始了冒泡阶段由底部（目标元素）产生的气泡，由内而外，不断向上冒泡，直到最外面（html标签）结束。

好吧，我知道画的有点丑，但是不可否认，确实挺形象的。如果还是有些迷糊，那么可以再看一下下面这张图。点击可查看示例

去示例中试一试便清楚了~

处理事件

理解了事件的捕获和冒泡机制，对于事件处理就好办了。

监听事件

/**
 * @param { event } 事件
 * @param { functionEvent } 事件处理函数
 * @param { capture } 是否在捕获阶段触发事件
 **/
element.addEventListener(event, functionEvent, useCapture)

事件和事件处理函数很好理解。 capture 表示是否在捕获阶段处理函数 ps：默认为 false，表示在冒泡阶段处理函数，ie 低版本浏览器不支持在捕获阶段处理函数。

阻止默认事件

event.preventDefault()  // 阻止事件默认动作，比如阻止 submit 按钮默认提交
event.stopPropagation() // 阻止捕获 和 冒泡阶段中事件的进一步传播，比如是在‘石头’下沉或者‘气泡’冒泡的过程中使之突然消失

事件代理： 从上面事件机制可以看出，如果没有外部干扰，在子节点上触发的事件，在捕获和冒泡最终都会经过父节点因此，我们可以将事件处理函数绑定在父节点上面

这样做的好处一个是可以不关心子元素是同步还是异步的另一个是如果有多个子元素，可以不用绑定多个事件（在异步列表 click 事件中很常见）。

<ul id="ulId">
  <li>list1</li>
  <li>list2</li>
  <li>list3</li>
</ul>

document.getElementById('ulId').addEventListener('click', function(e) {
  var innerHTML = e.target.innerHTML // e.target 表示触发事件的元素（石头）
  if(innerHTML === 'list1') {
    console.log(1)
  } else {
    console.log(0)
  }
}, false)