理解javascript事件流

2019-03-29  本文已影响0人  笑傲江湖拎壶冲

一个事件的生命周期包括三个阶段:捕捉 目标 冒泡

捕捉阶段

当某个事件被触发时,浏览器会找出事件涉及的元素,这个就是事件的目标。浏览器会找出body元素和目标之间的所有元素并检查它们,看看它们是否带有事件处理器,浏览器会优先触发这些事件处理器,然后才会轮到目标自身的处理器。

事件捕捉让目标元素的各个上级元素都有机会在事件传递到目标元素本身之前对其作出反应,而stopPropagation终止事件在元素树中的浮动,阻止事件继续流动

目标阶段

目标阶段是三个阶段中最简单的,当捕捉阶段完成后,浏览器会触发目标元素上任何已添加的事件类型监听器

冒泡阶段

完成目标阶段后,浏览器开始转而沿着上级元素链朝body元素前进,在沿途的每个元素上,浏览器会检查是否存在针对该事件类型但没有启用捕捉的监听器,addEventListener第三个参数是false代表的是事件冒泡

上一篇 下一篇

猜你喜欢

热点阅读