JavaScript的那些坑之事件冒泡

最新推荐文章于 2020-06-26 11:54:13 发布

杨小事er

最新推荐文章于 2020-06-26 11:54:13 发布

阅读量1k

点赞数

分类专栏： JavaScript的那些坑 JavaScript的那些坑文章标签：事件冒泡 javascript 前端

本文链接：https://blog.csdn.net/qq_25936689/article/details/50503019

版权

JavaScript的那些坑同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

JavaScript的那些坑

6 篇文章 0 订阅

订阅专栏

在我的上一篇博客里，为大家总结了事件代理的用法，传送门：JavaScript的那些坑之事件代理。

既然提到了事件，那么就不得不提到事件冒泡，这可是许多bug的罪魁祸首。

事件捕获和事件冒泡

让我们再重温一下事件捕获和事件冒泡，

事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。

事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

addEventListener

这里不得不提到一个方法

绑定事件的对象方法；addEventListener();（IE8浏览器下是attachEvent();IE9及以上可以兼容addEventListener();）

addEventListener()里含有三个参数，一个是事件名称（event），第二个是事件执行的函数（function），最后一个是事件捕获（true/false）。

最后一个参数的true就代表着事件捕获，false就代表着时间冒泡。

例如：obj.addEventListener("onclick",function(){},true/false);注意：写事件名时候要加上"on"前缀（"onload"、"onclick"等）。

阻止事件冒泡

事件冒泡是很容易出bug的，比如divA中有一个spanB，两个容器都有各自的onclick事件，但是触发spanB的onclick事件时候会自动冒泡，也会触发到divA的onclick事件，如果你不想触发divA的onclick事件的话，就需要阻止事件冒泡。就像下面的例子一样。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>事件冒泡</title>
<style type="text/css">
	#A{width: 200px;height: 200px;background-color: red;position: relative;}
	#B{width: 100px;height: 100px;background-color: green;position: absolute;}
</style>
<script type="text/javascript">
window.οnlοad=function(){
	var oDiv=document.getElementById('A');
	var oSpan=document.getElementById('B');
	oDiv.οnclick=function(ev){
		var oEvent=ev||event;
		oDiv.style.display='none';
	}
	oSpan.οnclick=function(ev){
		var oEvent=ev||event;
		oSpan.style.display='none';
		stopEventBubble(oEvent);
	}
	//阻止事件冒泡的函数
	function stopEventBubble(event){
		var e=event || window.event;
		if (e && e.stopPropagation){
			e.stopPropagation();    
		}else{
			e.cancelBubble=true;
		}
	}
}
</script>
</head>
<body>
<div id="A">
	<span id="B"></span>
</div>
</body>
</html>

这就可以阻止span的onclick事件冒泡到div上，

如果去掉oSpan的onclick函数中的stopEventBubble(oEvent);这句话就会没有阻止事件冒泡，什么后果，大家也都能猜得出来把~

阻止事件冒泡不仅仅可以采用stopPropagation();方法，还可以采用preventDefault();方法阻止浏览器的默认事件，用法和stopPropagation();也是一样的~

杨小事er

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的那些坑之事件冒泡

在我的上一篇博客里，为大家总结了事件代理的用法，传送门：JavaScript的那些坑之事件代理。既然提到了事件，那么就不得不提到事件冒泡，这可是许多bug的罪魁祸首。让我们再重温一下事件捕获和事件冒泡，事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
复制链接

扫一扫