捕获 与 冒泡

·  阅读 76

什么是捕获和冒泡?

当一个事件发生在具有父元素的元素上时,现代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。

\

在捕获阶段:

  • 浏览器检查元素的最外层祖先<html>,是否在捕获阶段中注册了一个onclick事件处理程序,如果是,则运行它。
  • 然后,它移动到<html>中单击元素的下一个祖先元素,并执行相同的操作,然后是单击元素再下一个祖先元素,依此类推,直到到达实际点击的元素。

\

在冒泡阶段:

  • 浏览器首先检查被点击元素,(在开头的例子中,就是文字),然后看是否在冒泡阶段中有Onclick事件,如果是,就运行
  • 然后,寻找下一个parentNode, (在开头的例子中,就是儿子div),然后看是否在冒泡阶段中有Onclick事件,如果是,就运行
  • 然后再找下一个ParentNode, (在开头的例子中,就是爸爸div)

什么是事件委托

由于冒泡阶段,浏览器从用户点击的内容从下往上遍历至 window,逐个触发事件处理函数,

因此可以监听一个祖先节点(例如爸爸节点、爷爷节点)来同时处理多个子节点的事件

分类:
前端
标签:
分类:
前端
标签: