javascript事件冒泡、事件捕获、事件委托

最新推荐文章于 2023-05-30 11:47:38 发布

摸爬滚打的余生

最新推荐文章于 2023-05-30 11:47:38 发布

阅读量677

点赞数

分类专栏： javascript基础文章标签： javascript 事件委托事件冒泡事件捕获

本文链接：https://blog.csdn.net/qq_26389819/article/details/83278625

版权

本文详细介绍了DOM事件流中的事件冒泡、事件捕获和事件委托，通过实例解析它们的工作原理。事件冒泡是从事件目标向上级节点传播，事件捕获则从document开始向下传递。事件委托利用事件冒泡机制，通过在父元素上绑定事件来处理子元素的事件，从而减少DOM操作，提高性能。同时，文章也提及了如何阻止事件冒泡及其影响。

摘要由CSDN通过智能技术生成

浅谈事件冒泡、事件捕获和事件委托

DOM事件流

DOM事件流

对于学习过javascript的人而言，DOM对象必然再熟悉不过，我们常谈的DOM(文档对象模型)的结构是一个由许多的元素节点构成的树形结构。当一个HTML元素产生了一个事件后，该事件会在当前元素节点与根节点之间的路径上传播，事件所经过的路径都会收到该事件，这个传播过程就是我们所谓的DOM事件流。

DOM事件流

DOM事件流即事件的传播过程，可简单的划分出两种事件传递的方向，即事件捕获与事件冒泡。

事件冒泡

先从事件冒泡说起，对于事件冒泡，下面来看一个简单的例子。

<!DOCTYPE html>
<html>
<head>
	<title>事件机制</title>
</head>
<body>
	<div id="content">
    	<button id="btn">button</button>
    </div>
</body>
</html>
<script type="text/javascript">
	var content = document.getElementById('content');
	var btn = document.getElementById('btn');
	btn.addE