事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。

html
<div id="outer"> <p id="inner">Click me!</p> </div>

上面的的两个元素,如果点击 inner,他们的执行顺序是什么呢?

  • 事件冒泡:先执行 inner 的监听事件在执行 outer 的监听事件
  • 事件捕获:先执行 outer 的监听事件在执行 inner 的监听事件

其实这个很好理解,冒泡就是从一个泡泡从水底往上冒当然是里面的先执行啦。

至于为什么会有这两种情况,这就要谈到网景和微软的战争了,两家公司的理念不同。网景主张捕获方式,微软主张冒泡方式。后来 w3c 将两者都保留了下来。

addEventListener 的第三个参数就是为冒泡和捕获准备的。第三个参数设置为 true 可以将让当前元素绑定的事件先于里面的元素绑定事件执行。默认是 false

如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:叶继伟

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!