js事件冒泡、事件捕获和阻止默认事件详解

时间：2023-12-09

JS事件冒泡、事件捕获和阻止默认事件

事件冒泡

事件冒泡是指当一个元素触发了某个事件时，该事件会从子元素一直冒泡到祖先元素。例如，当一个按钮被点击时，点击事件会首先被触发，然后该事件会向外冒泡，一直到文档根节点才停止。

事件捕获

事件捕获是指当一个元素触发了某个事件时，该事件会从祖先元素一直捕获到子元素。例如，当一个按钮被点击时，点击事件会从文档根节点开始捕获，直到被点击的按钮才停止。

阻止默认事件

有些元素会有默认的事件行为，例如a标签的点击会跳转页面，表单的提交会刷新页面等。为了防止这些默认行为发生，我们可以使用preventDefault()方法来中止默认事件的执行。例如，当点击一个a标签时，可以使用以下代码防止跳转：

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
});

事件流模型

事件流模型分为两种：捕获型事件流和冒泡型事件流。在捕获型事件流中，事件首先从最外层的祖先元素被捕获，接着沿着树形结构依次触发，最后到达目标元素；在冒泡型事件流中，事件首先从目标元素开始，沿着树形结构依次向上冒泡，最终到达祖先元素。默认情况下，所有的事件都是冒泡型事件流。

示例一：事件冒泡

<body>
  <div id="grandparent">
    <div id="parent">
      <div id="child"></div>
    </div>
  </div>
</body>

document.querySelector('#grandparent').addEventListener('click', function(){
  console.log('Grandparent clicked');
});

document.querySelector('#parent').addEventListener('click', function(){
  console.log('Parent clicked');
});

document.querySelector('#child').addEventListener('click', function(){
  console.log('Child clicked');
});

当点击child元素时，依次输出“Child clicked”，“Parent clicked”和“Grandparent clicked”。

示例二：阻止默认事件

<body>
  <a href="http://www.baidu.com">点击跳转</a>
</body>

document.querySelector('a').addEventListener('click', function(event){
  event.preventDefault();
  console.log('Link clicked, but default behavior prevented');
});

当点击a标签时，阻止了跳转并输出“Link clicked, but default behavior prevented”。

上一篇：基于JS实现带动画效果的流程进度条 下一篇：手把手教你如何排查Javascript内存泄漏

js事件冒泡、事件捕获和阻止默认事件详解