不理解冒泡型事件模型和捕获型事件模型,麻烦详细解说下

不理解冒泡型事件模型和捕获型事件模型,麻烦详细解说下

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
卡布琦诺 2019-06-13 18:21:20

1、冒泡型事件指的是事件按照从最特定的事件目标到最不特定事件目标顺序逐一触发,例如:

http://img1.sycdn.imooc.com//climg/5d02232200012bd910510601.jpg

p标签、div标签、body标签都添加了onclick事件,触发了add()函数,单击鼠标时触发了事件,会发现3个onclick函数都触发了,触发的顺序是p标签、div标签、最后的body标签。冒泡型事件像冒泡一样从DOM层次结构的最低端往上一级级上升

2、捕获型事件和冒泡型事件是相反的,从DOM层次结构的最高端往下一级级下降,从DOM层次的顶端开始向下延伸

希望可以帮到你!

  • 冒泡用于事件委托,那么捕获常用于哪些情况呢?
    2019-06-13 22:07:22
  • 同学你好,捕获的应用场景很少,老师给你举个简单的例子理解一下捕获机制, 有两个元素是父子关系, 只想给父元素添加事件, 可以利用事件捕获机制找到父元素, 阻止事件传递(addEventListener 的第三个参数设置为true)。 实际开发中很少会用到捕获型事件, 同学了解一下即可,冒泡型事件常用, 同学可以重点掌握这个哦,祝学习愉快~~~
    2019-06-14 11:30:44
sunleee 2019-06-13 18:20:40

懒得贴代码。。。

手动说一下:

比如说一个div嵌套了三个p标签,三个p标签是不是属于div的子类,div是三个p标签的父类,div的大小是不是三个p标签加起来的大小,加上margin。

当你给这个div添加事件,比如点击事件。你点击p也会触发这个点击事件,因为p也属于div标签。当你给p标签添加点击事件,并且div标签也有点击事件的时候,会同时触发这两个事件,原理就是他们两个都设置了点击事件,并且他们是互相依赖的关系.

执行顺序 冒泡是从下往上(p->div)

捕获是(div-p)

希望能帮助到你

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师