事件捕获、冒泡的工作原理

什么是事件流

事件流是指从页面中接收事件的顺序。也就是说,当一个事件产生时,这个事件的传播过程就是事件流。

什么是事件冒泡?

IE中的事件流叫事件冒泡。事件冒泡是指事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)。对于HTML来说,当一个元素产生一个事件时,它会把这个事件传递给它的父元素,父元素接收到之后,还要继续传递给它的上一级元素,就这样一直传播到document对象(一些浏览器会传播到window对象)。

在一个对象上触发某类事件(如click)时,如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序;如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器中是window )。

冒泡型事件触发顺序是指从最特定的事件目标(触发事件对象)到最不特定的事件目标对象(document对象)。

JavaScript冒泡机制是指如果某元素定义了事件A,如click 事件,如果触发了事件之后,没有阻止冒泡事件,那么该事件将向父级元素传播,触发父类的click 事件。

什么是事件捕获

事件捕获是指不太具体的元素更早地接收到事件,而最具体的节点最后接收到事件。它们的用意是在事件到达目标之前就捕获它;也就是与冒泡的过程正好相反。以HTML的click事件为例,document对象(DOM0级规范要求从document开始传播,但是现在的浏览器是从window对象开始的)最先接收到click 事件,然后事件沿着DOM树依次向下传播,一直传播到事件的实际目标。

图解

在这里插入图片描述

网景(Netscape)公司团队的事件流采用事件捕获方式,而微软(Microsoft)公司的事件流采用事件冒泡方式,W3C对网景公司和微软公司提出的方案进行了中和处理,规定了事件发生后,首先实现事件捕获,但不会对事件进行处理;然后进行到目标阶段,执行当前元素对象的事件处理程序,但它会被看成是冒泡阶段的一部分;最后实现事件的冒泡,逐级对事件进行处理。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

努力做一只合格的前端攻城狮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值