js中的事件冒泡和事件捕捉

简介: js中的事件冒泡和事件捕捉

JS中的事件流分为三个阶段:捕获阶段、目标阶段和冒泡阶段。事件捕获是从外向内依次触发,而事件冒泡则是从内向外依次触发。在使用addEventListener方法添加事件监听时,第三个参数用来控制是冒泡事件还是捕获事件(false为冒泡,true为捕获,默认值为false)。

举个例子,当一个按钮被点击时,事件会首先在最外层的元素上进行捕获,然后逐级向下,直到到达目标元素,接着在目标元素上进行处理,最后再从目标元素开始向上冒泡,直到到达最外层的元素。

以下是一个简单的例子,演示了事件冒泡和事件捕获的过程

<!DOCTYPE html>
<html>
<head>
  <title>事件冒泡和事件捕获</title>
</head>
<body>
  <div id="outer">
    <p id="inner">点击我</p>
  </div>
  <script>
    var outer = document.getElementById("outer");
    var inner = document.getElementById("inner");
    outer.addEventListener("click", function(){
      console.log("outer捕获");
    }, true);
    inner.addEventListener("click", function(){
      console.log("inner目标");
    });
    outer.addEventListener("click", function(){
      console.log("outer冒泡");
    });
  </script>
</body>
</html>

当点击“点击我”这个元素时,控制台会输出以下内容:

outer捕获
inner目标
outer冒泡
目录
打赏
0
0
0
0
16
分享
相关文章
JS DOM 事件流与事件冒泡
【10月更文挑战第16天】理解 DOM 事件流和事件冒泡是掌握 JavaScript 事件处理的关键。通过合理利用事件冒泡,可以实现更高效、灵活的事件处理机制,提升用户体验和开发效率。在实际开发中,要根据具体情况灵活运用这些概念,以达到最佳的效果。
140 42
|
6月前
|
js两种移除事件的方法
js两种移除事件的方法
67 3
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
75 3
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
147 5
js事件队列
【10月更文挑战第15天】
98 6
|
6月前
|
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
297 0
|
6月前
|
js两种移除事件的方法
js两种移除事件的方法
86 0
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
76 2
|
9月前
|
js 事件流、事件冒泡、事件捕获、阻止事件的传播
js 事件流、事件冒泡、事件捕获、阻止事件的传播
130 1
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等