DOM 事件模型

171 阅读1分钟

1事件流

DOM事件传播有三个阶段:

  1. 捕获阶段—— 事件(从 Window)向下走近元素。
  2. 目标阶段—— 事件到达目标元素。
  3. 冒泡阶段—— 事件从元素上开始冒泡。 下面是在表格中点击 的图片,摘自规范:

image.png

1.1先捕获还是先冒泡

由图可以得知,事件首先通过祖先元素向下到达元素(捕获),然后到达目标(目标阶段),最后上升(冒泡段)。先捕获再冒泡,是由w3c组织规定的。

2 什么是捕获什么是冒泡

2.1冒泡

  • 当一个事件发生在一个元素上,它会首先运行在该元素上的处理程序,然后运行其父元素上的处理程序,然后一直向上到其他祖先上的处理程序。
  • 由名字可以得知,就是由里到外,由下到上的过程,如同水中的泡泡一样。
  • 事件冒泡是由ie提出实现的,事件是由最具体的元素接收,然后逐级向上传播,在每一级的节点上都会发生,直到传播到document对象。

2.2捕获

  • 与冒泡正好相反,事件首先通过祖先链向下到达元素(捕获阶段),然后到达目标(目标阶段),最后上升(冒泡阶段),在途中调用处理程序。是由网景公司提出实现的。
  • 也就是从最上面的节点到实际事件的节点,一般是从document对象开始传播,不过捕获相对于冒泡用的比较少。

参考资料

www.w3.org
菜鸟教程
JavaScript
mdn