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冒泡
相关文章
|
6天前
|
JavaScript 前端开发 开发者
javascript事件大全
javascript事件大全
10 1
|
6天前
|
JavaScript 前端开发
Javascript的一些监听事件
Javascript的一些监听事件
11 2
|
6天前
|
JavaScript 前端开发
js的事件介绍
js的事件介绍
11 1
|
6天前
|
JavaScript 前端开发
js的事件
js的事件
11 1
|
6天前
|
JavaScript 前端开发
js的交互事件
js的交互事件
12 1
|
6天前
|
JavaScript 前端开发
js的事件冒泡
js的事件冒泡
12 1
|
10天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
12天前
|
JavaScript 前端开发 开发者
【JavaScript技术专栏】JavaScript事件处理机制详解
【4月更文挑战第30天】本文探讨JavaScript中的事件处理机制,涉及事件类型(如click、mouseover)、事件流(冒泡型、捕获型及目标阶段)、事件处理函数(内联与addEventListener方法)以及事件委托(用于优化内存和处理动态元素)。此外,还介绍了事件取消,通过`preventDefault()`和`stopPropagation()`控制事件行为。理解这些概念对构建交互式Web应用至关重要。
|
19天前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
24 2
|
28天前
|
JavaScript 前端开发
JavaScript DOM 操作:解释一下事件冒泡(Event Bubbling)和事件捕获(Event Capturing)。
【4月更文挑战第14天】JavaScript中的事件处理包括冒泡和捕获两个阶段。事件冒泡是从根节点向目标元素逐级向上传播事件,允许在元素内部捕获外部事件。事件捕获则相反,从根节点向下到目标元素,使得外部能捕获内部事件。`addEventListener`方法用于添加事件监听器,通过`useCapture`参数切换冒泡或捕获阶段处理事件,默认为`false`(冒泡阶段)。兼容性考虑,推荐使用`addEventListener`。
23 0