DOM--事件响应链（冒泡目标捕获）
文章目录
- 4、事件响应链（冒泡目标捕获）
- 1、事件的三个阶段:
- 2、阻止冒泡
- 易错：
- 面试中的坑：
4、事件响应链（冒泡目标捕获）
如图所示：
1、事件的三个阶段:
- 先捕获==>后目标==>再冒泡,只能有一个阶段触发程序执行,比如捕获阶段触发了到了冒泡阶段就不再触发。
- 事件如果经过所有元素都没有被处理,那么这个事件会消失。
- 事件传递的过程 只跟文档树的结构有关系 跟界面显示的层叠效果没有任何关系。
事件冒泡：结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）
事件捕获:结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）与事件冒泡是反过来的。
2.addEventListener绑定事件，中的第三个参数：
如果设置为true，则在捕捉的时候执行事件。
如果设置为false则是在冒泡时触发执行事件。
大部分默认冒泡时触发。
2、阻止冒泡
1、阻止事件冒泡:
-
W3C标准 event.stopPropagation();
但不支持 ie9以下版本。
-
stopImmediatePropagation()
支持stopPropagation的浏览器中也可以用。 -
stopImmediatePropagation( )方法，这个不仅会阻止事件向祖元素的冒泡，也会阻止同一个节点上同一事件的其他的事件处理程序 (优先级比它低的,同元素同事件多处理程序时)。
-
event.cancelBubble=true; ie8及ie8以下可用。
2、阻止默认事件:
-
默认事件——表单提交，a标签跳转，右键菜单等等
-
return false; 以对象属性的方式注册的事件才生效，用addEventListener/attachEvent这种是不生效的。
-
event.preventDefault(); W3C标准，IE9以下不兼容。
-
event.returnValue=false;兼容IE。
易错：
阻止冒泡，设计让监听器在捕获阶段运行 等等，都是指的同一个事件。如 ：点击和鼠标移动是不同的点击事件和滑动事件是两条链。他们之间并不会绑定相互影响，而是独立的。
面试中的坑：
问：addEventListener的第三个参数为true是阻止事件传递还是false？
答：都不阻止，都不会阻止事件传递。要阻止事件传递，唯一的方式就是阻止事件冒泡：事件对象调用stopPropagation()这个函数。