关于浏览器的eventflow(capture and bubble up)

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 74 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chentianwei/p/9335192.html

文章标签：

#javascript #ViewUI

本文深入探讨了JavaScript中的事件流机制，特别是Bubble Up事件模型，并通过实际代码示例展示了事件捕获与冒泡的过程。此外，还讲解了如何利用addEventListener来响应不同类型的事件。

因为，没有全面的学习javascript，及其事件原理：

全占的课程：4-5 浏览器 Bubble Up 事件模型中

不是很理解它所讲的。网上查找相关知识点。记录中在博客中：

理解了JS的加载

https://www.cnblogs.com/chentianwei/diary/2018/07/12/9300355.html

这篇文章讲了eventflow的知识：借用w3c的模型。

由bubbles 事件流扩展到DOM的发展

我个人的实践：

代码：

...

document.addEventListener("turbolinks:load", function() {
　document.getElementById("post-list").addEventListener("click",function(){
　　console.log("hello");
　})
})

document.addEventListener("turbolinks:load", function() {
　document.querySelectorAll(".toggle-flag").forEach(function(anchor){
　　anchor.addEventListener("click", function(){

　　 console.log("world");

　　})
　})
})

点击div边框处，console会出现"hello"；

点击p元素，console会出现：

world
hello

如果内层的addEventListener（）第三个参数是true，代表UPcatpture，则先显示hello。

重点：bubbles event property

如果一个事件是一个bubbling event则返回一个boolean值。

bubbles是一个object event, 也是DOM Event。

案例：https://www.w3schools.com/jsref/tryit.asp?filename=try_dom_event_bubbles

转载于:https://www.cnblogs.com/chentianwei/p/9335192.html