DOM事件流

事件流

简述

事件流描述了页面接受事件的顺序。主要有两个方案:一个是微软提出来的事件冒泡、一个是网景公司提出来的事件捕获,事件冒泡是由最深的节点开始触发,然后向上传播到window对象,事件冒泡是先由最上层的节点先接收,然后传播到最深的节点。

事件流的过程

DOM2 规范中事件流分三个阶段:
  1. 事件捕获
  1. 到目标节点
  1. 事件冒泡
事件捕获最先发生,为拦截事件提供可能,然后到达目标节点,最后是事件冒泡,最迟要在这个阶段响应事件,事实上,大多数情况下事件处理程序会被添加到事件流的冒泡阶段,因为这样可以兼容绝大多数现代浏览器,把事件处理程序添加到捕获阶段通常是为了拦截事件。
也就是说,事件处理程序会在冒泡阶段执行,而拦截事件是在捕获阶段执行。

指定冒泡还是捕获

在现代js中常常用addEventListener()方法来为节点注册监听器,addEventListener()可以指定事件处理程序是在冒泡阶段触发还是捕获阶段触发,默认是冒泡阶段触发。

阻止事件和阻止冒泡

事件处理程序接受一个参数,通常命名为e表示event,e.preventDefault()阻止默认行为,e.stopPropagation()阻止事件传播。