DOM——事件链原理(捕获、目标、冒泡)、阻止事件冒泡和默认事件

161 阅读2分钟

事件链原理(捕获、目标(target)、冒泡):

事件链(path):先捕获,后目标,再冒泡,只能有一个阶段触发程序执行,比如捕获阶段触发了到了冒泡阶段就不再触发

(捕获阶段:相当于程序从window开始访问他们的子元素是否有绑定的那个事件,如果有也一直访问,一直访问到目标元素为止,冒泡阶段:然后就从目标元素位置开始进行将被刚刚访问到绑定事件的程序触发)

事件经过所有元素都没有被处理,这个事件消失

事件传递的过程 只跟文档树的结构有关系 跟界面显示的层叠效果没有任何关系

事件冒泡:结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素。(自底向上)

事件捕获:结构上(非视觉上)嵌套关系的元素,会存在事件捕获的功能,即同一事件,自父元素捕获至子元素(事件源元素)。(自顶向下)

2.默认在冒泡的时候执行事件:onclick/attach和 addEventListener传false的时候

3.addEventListener绑定事件,如果把第三个参数设置为true,则在捕捉的时候执行事件

注意:focus,blur,change,submit,reset,select等事件不冒泡

例如:

image.png

image.png

image.png

阻止事件冒泡:

1.event.stopPropagation()

2.stopImmediatePropagation():这个不仅会阻止事件向祖元素的冒泡,也会阻止同一个节点上同一事件的其他的事件处理程序(优先级比它低的,同元素同事件多处理程序时)

3.e.cancelBubble=false:ie8浏览器以下

注意:易错点:阻止冒泡,设计让监听器在捕获阶段运行 等等 都是指的是同一个事件。

阻止默认事件:

默认事件:表单提交,a标签跳转,右键菜单等等

1.return false; 以对象属性的方式注册的事件才生效,addEventListener/attachEvent这种是不生效的

2.event.preventDefault(); W3C标准,IE9以下不兼容

3.event.returnValue=false;兼容IE