当前位置: 首页 > Web前端 > HTML5

JS回顾——JS中事件的捕获与冒泡

时间:2023-04-04 23:15:13 HTML5

什么是捕获?什么是冒泡?给元素绑定事件会经历三个阶段:1:捕获阶段(capturephase)——首先从根元素流向目标元素;2:目标阶段(targetphase)——目标元素上的事件被触发;3:冒泡阶段(bubblingphase)——目标元素流向根元素,就像你中午放学回家吃饭,这件事必须经历三个阶段:1:回家阶段——从学校出发——>toyourhomeDownstairs-->gotothedoor-->enterthedoor2:targetstage--sitoutandeat3:gotoschoolstage--出去-->下楼到你家-->走回学校看例子

ShadyGroveAeolian
OvertheRiver,CharlieDorian
点击该元素的事件流程图如下,可以清楚的看到点击绑定到tdelement[overtheriver,charlie]事件的事件流经历了三个阶段:capture阶段window->document->html->body->table->tbody->trtarget阶段td[overtheriver,charlie]冒泡阶段tr->tbody->->table->body->html->document->window所以如果元素绑定的事件的useCapture默认为true,表示在捕获中触发phase,改成false,表示冒泡阶段触发是指事件流必须按照上述顺序经历这三个阶段。设置true和false的区别在于,比如上面的回家吃饭的事件,你在楼下绑定了一个【吃辣条】的事件,true表示到达是在捕获阶段,即回家的过程我在楼下吃了麻辣烫,false的意思是冒泡阶段下楼吃麻辣烫,也就是上学的过程。关于事件捕获,事件冒泡参考场景,事件委托等,下面引用两篇文章。https://www.jianshu.com/p/831...https://juejin.im/post/5aab87...