两分钟带你了解～事件冒泡和事件捕获

最新推荐文章于 2022-07-17 13:03:40 发布

无脑的猿人

最新推荐文章于 2022-07-17 13:03:40 发布

阅读量6.6k

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/pycharm_k/article/details/106782075

版权

html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

事件冒泡和事件捕获

初始化代码示例

我们先初始化一个小dome，以下是代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件冒泡和事件捕获</title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#outer{
			height: 300px;
			width: 100%;
			background-color: red;
			/* margin: 0 auto; */
		}
		#inner{
			height: 50%;
			width: 50%;
			background-color: green;
			margin: 0 auto;
		}
		#item{
			height: 50%;
			width: 50%;
			background-color: #007BFF;
			margin: 0 auto;
		}
	</style>
	<body>
		<div id="outer">
			<div id="inner">
				<div id="item">
				</div>
			</div>
		</div>
	</body>
</html>

初始化效果图

在这里插入图片描述

事件冒泡和事件捕获

那么什么是事件冒泡，什么是事件捕获。
事件冒泡是事件由内而外的触发，这个基准是html的文档结构。
事件捕获，从字面意思可以看出来捕获，便是在某个地方把它抓住，不让他执行下去了，事件捕获是从外向内开始捕获。
以上为个人理解。

这里给大家截个图：
在这里插入图片描述

addEventListener()

这是原生js用来绑定事件的一个方法，他有三个参数分别是，元素、函数体、true或者false。那么第三个参数代表事件捕获和事件冒泡。
true代表事件捕获
false代表事件冒泡（不设置默认为false）
这个方法虽然能捕获事件，但是不能阻止其他事件的进行。

我们先绑定事件，这边看一下效果图：

var outer = document.getElementById('outer');
	var inner = document.getElementById('inner');
	var item = document.getElementById('item');
	// 红色
	function red(){
		console.log("我是红色");
	}
	// 绿色
	function green(){
		console.log("我是绿色");
	}
	// 蓝色
	function blue(){
		console.log("我是蓝色");
	}
	// 分别添加事件绑定
	outer.addEventListener('click',red,false);
	inner.addEventListener('click',green,false);
	item.addEventListener('click',blue,false);