JavaScript事件的三个阶段

事件的处理过程主要有三个阶段:捕获阶段,目标阶段,冒泡阶段;

捕获阶段:当我们在 DOM 树的某个节点发生了一些操作(例如单击、鼠标移动上去),就会有一个事件发射过去。这个事件从 Window 发出,不断经过下级节点直到触发的目标节点。在到达目标节点之前的过程,就是捕获阶段(Capture Phase)。事件由页面元素接收,逐级向下,到具体的元素。

《JavaScript事件的三个阶段》

目标阶段:当事件不断的传递直到目标节点的时候,最终在目标节点上触发这个事件,就是目标阶段。具体的元素本身。

冒泡阶段:事件冒泡即事件开始时,由最具体的元素接收(也就是事件发生所在的节点),然后逐级传播到较为不具体的节点。跟捕获相反,具体元素本身,逐级向上,到页面元素(我们平时用的事件绑定就是利用的事件冒泡的原理)。

《JavaScript事件的三个阶段》

事件捕获:当使用事件捕获时,父级元素先触发,子元素后触发。

事件冒泡:当使用事件冒泡时,子级元素先触发,父元素后触发。

W3C : 任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达事件源,再从事件源向上进行事件捕获(事件冒泡)。

标准浏览器:addEventListener(“click”,function,”true”)方法,若第三参数为true,则采用事件捕获。若为false,则采用事件冒泡。

IE浏览器只支持事件冒泡,不支持事件捕获,所以它不支持addEventListener(“click”,function,”true”)方法,所以ie浏览器使用ele.attachEvent(“onclick”,doSomething)。

事件传播的阻止方法:

在W3C中,使用stopPropagation()方法。

在IE下使用cancelBubble = true方法。

阻止默认行为:

在W3c中,使用preventDefault()方法。

在IE下return false。

    原文作者:SummerNH_6
    原文地址: https://blog.csdn.net/SummerJX/article/details/81626960
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞