资讯专栏INFORMATION COLUMN

JS复习-JS中事件的捕获与冒泡

BakerJ / 2092人阅读

摘要:也就是说事件流一定是按上面的顺序经过这三个阶段。关于事件捕获,事件冒泡的引用场景,有事件委托等。下面引用两篇文章。

什么是捕获?什么是冒泡?

给元素绑定事件会经历三个阶段:一:捕获阶段(capture phase)--先从根元素流向目标元素;二:目标阶段(target phase)--在目标元素上的事件被触发;三:冒泡阶段(bubbling phase)--目标元素流向根元素

就像你中午放学回家吃个饭,这件事情一定经历三个阶段:一:回家阶段-- 从学校出发-->到你家楼下-->走到门口-->进门 二:目标阶段-- 坐下吃饭 三:去学校阶段-- 出门-->走到你家楼下-->回到学校

来看一个例子


    
Shady Grove Aeolian
Over the River,Charlie Dorian

点击这个元素的事件流的图如下

可以很清晰地看到给【over the river,charlie】这个td元素绑定的点击事件的事件流经历了三个阶段:

捕获阶段 window->document->html->body->table->tbody->tr

目标阶段 td【over the river,charlie】

冒泡阶段 tr->tbody->->table->body->html->document->window

所以如果给元素绑定的事件的useCapture默认为true,表示在捕获阶段触发,改为false,表示在冒泡阶段触发。

也就是说事件流一定是按上面的顺序经过这三个阶段。设置true和false的不一样就是,比如在上面回家吃饭的事件中,你给到楼下绑定了一个【吃辣条】的事件,true就表示在捕获阶段即回家的过程中的到楼下就吃了辣条,false表示在冒泡阶段即去学校的过程中的到楼下吃辣条。

关于事件捕获,事件冒泡的引用场景,有事件委托等。下面引用两篇文章。
https://www.jianshu.com/p/831...
https://juejin.im/post/5aab87...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54187.html

相关文章

  • JS复习-JS事件捕获冒泡

    摘要:也就是说事件流一定是按上面的顺序经过这三个阶段。关于事件捕获,事件冒泡的引用场景,有事件委托等。下面引用两篇文章。 什么是捕获?什么是冒泡? 给元素绑定事件会经历三个阶段:一:捕获阶段(capture phase)--先从根元素流向目标元素;二:目标阶段(target phase)--在目标元素上的事件被触发;三:冒泡阶段(bubbling phase)--目标元素流向根元素 就像你中...

    haoguo 评论0 收藏0
  • JS复习-JS事件捕获冒泡

    摘要:也就是说事件流一定是按上面的顺序经过这三个阶段。关于事件捕获,事件冒泡的引用场景,有事件委托等。下面引用两篇文章。 什么是捕获?什么是冒泡? 给元素绑定事件会经历三个阶段:一:捕获阶段(capture phase)--先从根元素流向目标元素;二:目标阶段(target phase)--在目标元素上的事件被触发;三:冒泡阶段(bubbling phase)--目标元素流向根元素 就像你中...

    dcr309duan 评论0 收藏0
  • 2019js基础面试题整理复习

    摘要:复习整理有什么新特性新增语义化标签等新增用于绘画的元素用于媒介回放的和元素本地缓存有更好支持和是什么,文档是什么是用来描述网页的一种超文本标记语言,文档也被成为网页,它包含标签和纯文本是什么它不是标签,它为浏览器提供一种信息声明,告诉浏览器 复习整理 html 1.html5有什么新特性? 新增语义化标签、等 ​ 新增用于绘画的元素 ​ 用于媒介回放的video和aud...

    silencezwm 评论0 收藏0
  • 2019js基础面试题整理复习

    摘要:复习整理有什么新特性新增语义化标签等新增用于绘画的元素用于媒介回放的和元素本地缓存有更好支持和是什么,文档是什么是用来描述网页的一种超文本标记语言,文档也被成为网页,它包含标签和纯文本是什么它不是标签,它为浏览器提供一种信息声明,告诉浏览器 复习整理 html 1.html5有什么新特性? 新增语义化标签、等 ​ 新增用于绘画的元素 ​ 用于媒介回放的video和aud...

    yangrd 评论0 收藏0

发表评论

0条评论

BakerJ

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<