js事件流三个阶段

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

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

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

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

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

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

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

标准浏览器:addEventListener("click",function,"true")方法,

useCapture 默认为 false ,第三参数默认为false

若第三参数为true,则采用事件捕获。若为false,则采用事件冒泡。

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

事件传播的阻止方法:

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

在IE下使用cancelBubble = true方法。

阻止默认行为:

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

在IE下return false。

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值