什么捕获冒泡?难道浏览器是鱼吗?

原创
10/26 17:57
阅读数 3.4K
// 每日前端夜话 第422篇
// 正文共:1500 字
// 预计阅读时间:6 分钟

身为一个前端小混混,在开发中遇到凡是需要与用户互动或是需要由用户触发的功能,总是离不开事件处理。

今天聊聊浏览器的 DOM 事件传递机制。

DOM 事件

在浏览器的 Javascript 引擎解析 HTML、SVG 时,会将内容分析成一个个的 DOM (Document Object Model),当用户与 DOM 产生互动时,则是通过 DOM 上注册的事件监听器,去触发某个事件。

例如常见的 onClickonTouchStart,输入框的 onInputonChangeonBlur 等,都是常用的事件类型。

事件监听

例如我们曾经最熟悉的 jQuery,我们会用这样的方式去注册事件监听:

$('#id').on('click'function(){ ... })

但 jQuery 已经成为明日黄花;在现代框架中,Vue 对注册事件监听器提供了一些语法糖,让你写起来很轻松:

<button @click="clickHandler">click me!</button>

React 除了语法糖外,底层还将 DOM 事件再封装一层,并帮你全都代理document 上,性能很不错:

<button onClick={clickHandler}>click me!</button>

当然不管是什么框架,底层都等同于通过 Javascript 进行操作:

document.querySelector('#id').addEventListener('click', clickHandler)

事件代理

前面说到 React 会帮你把事件代理到 document 上,这是什么意思呢?

看这个的 简单小例子,点击按钮新增 li 时,会一并注册事件监听:

<!--HTML-->
<button id="push">push</button>
<button id="pop">pop</button>

<ul id="list"></ul>
/*JavaScript*/

(function({
  document.querySelector('#push').addEventListener('click', pushHandler)
  document.querySelector('#pop').addEventListener('click', popHandler)

  const list = document.querySelector('#list')

  function pushHandler({
    list.appendChild(getNewElem(list.childNodes.length))
  }

  function popHandler({
    document.querySelectorAll('#list>li')[list.childNodes.length - 1].remove()
  }

  function getNewElem(text{
    const elem = document.createElement('li')
    elem.innerText = text
    elem.addEventListener('click', eventHandler)
    return elem
  }
  
  function eventHandler(e{
    alert(e.target.innerText)
  }
})()

这样很直观,但缺点也很明显;每新增一个元素,都会创建一个事件监听,当数量增多,造成的内存消耗也会十分可观:

function pushHandler({
  list.appendChild(getNewElem(list.childNodes.length))
}function getNewElem(text{
  const elem = document.createElement('li')
  elem.innerText = text
  elem.addEventListener('click', () => alert(text))
  return elem
}

如果把事件监听注册在外层的 ul,并在点击事件触发时判断触发到到的是谁:

function listClickHandler(e){
  if (e.target.tagName === 'LI') alert(e.target.innerText)
}

通过事件代理,无论内容有多少,事件监听都只会有一组,效能得到了很大的提升。

移除事件监听

注册事件监听器很方便,但在确定不会再使用监听器时,要记得通过 removeEventListener 将事件监听移除。如果留下了无用的事件监听器,将会造成内存的浪费,对性能有很大的损害。

大家应该注意到了,在前面那个简易的小例子中并没有移除事件监听,而且每创建一个新的子元素,都会同时创建新的函数:

function getNewElem(text) {
const elem = document.createElement('li')
elem.innerText = text
 
 // 在这里创建新的匿名函数
elem.addEventListener('click', () => alert(text)) return elem
}

比较好的写法是把匿名函式抽出来,并在移除子元素时一并移除事件监听器:

function popHandler({
  const elem = document.querySelectorAll('#list>li')[list.childNodes.length - 1]
  elem.removeEventListener('click', eventHandler) // 移除事件监听
  elem.remove()
}function getNewElem(text{
  const elem = document.createElement('li')
  elem.innerText = text
  elem.addEventListener('click', eventHandler)
  return elem
}function eventHandler(e{
    alert(e.target.innerText)
  }

在 Vue 和 React 等主流网页框架中,只要是使用内建的语法注册的事件监听,它们都会自动在无用的时候移除,可以放心使用;如果是自己实现事件监听,务必要记得移除。

捕获与冒泡

跑题太远了,所以到底什么是捕获与冒泡?

根据 W3C 所定义的 Event Flow:

DOM Event 框架

浏览器中的事件传递过程分成三个阶段:

  • 捕获阶段:由 DOM 树的最外层依序向内,过程中触发个别元素的捕获阶段事件监听。
  • 目标阶段:到达事件目标,按照注册顺序触发事件监听。
  • 冒泡阶段:由事件目标依序向外,过程中触发个别元素的冒泡阶段事件监听。

这就是刚刚提到的事件代理的机制了;在事件传递过程中,捕获冒泡阶段必然会经过外层元素,因此可以将事件监听注册到外层元素上。

另外,当我们在用 addEventListener 注册事件监听器时,可以传递第三个参数,指定这个事件要在什么阶段触发:

elem.addEventListener('click', eventHandler) // 未指定,预设为冒泡
elem.addEventListener('click', eventHandler, false// 冒泡
elem.addEventListener('click', eventHandler, true// 捕获
elem.addEventListener('click', eventHandler, {
  capturetrue // 是否为捕获。IE、Edge 不支援。其他属性请参考 MDN
})

如上图所示, 当一个 DOM 事件发生时,会由最外层的 window 开始依次向内传递事件,一直传到我们的事件目标,触发完目标上注册的事件监听,再进入冒泡阶段反向传递;由指定触发的阶段,就能确定执行的顺序了。






精彩文章回顾,点击直达



转了吗
赞了吗
在看吗


本文分享自微信公众号 - 前端先锋(jingchengyideng)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
2
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
2
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部