javascript事件冒泡

最新推荐文章于 2022-03-27 10:33:11 发布

壹间show

最新推荐文章于 2022-03-27 10:33:11 发布

阅读量779

点赞数

分类专栏：浅谈javascript 前端杂文文章标签： javascript 事件冒泡

本文链接：https://blog.csdn.net/xpf_show/article/details/38524347

版权

前端杂文同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

浅谈javascript

19 篇文章 0 订阅

订阅专栏

一事件

在浏览器客户端应用平台，基本生都是以事件驱动的，即某个事件发生，然后做出相应的动作。

浏览器的事件表示的是某些事情发生的信号。事件的阐述不是本文的重点，尚未了解的朋友，可以访问W3school教程进行了解，这将有助于更好地理解以下的内容。

二冒泡机制

在javascript中，冒泡机制和在算法数据结构中的概念是不一样的。在这里主要的反馈的是事件流过程中事件捕获后的一个冒泡反馈的过程。

正如这张图看到的，这个气泡就相当于我们这里的事件，而水则相当于我们的整个dom树；事件从dom 树的底层层层往上传递，直至传递到dom的根节点。

也就是如下图

在这里，我写个简单的案例进行分析下；

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>事件冒泡案例</title>
	<style type="text/css">
	body{padding: 0;margin:0;}
	div{padding: 100px;}
	</style>
</head>
<body>
	<div style="background:#ccc;">
		<div style="background:#808008;">
			<div style="background:red;"></div>
		</div>
	</div>
</body>
</html>

跟着为其添加点击事件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>事件冒泡案例</title>
	<style type="text/css">
	body{padding: 0;margin:0;}
	div{padding: 100px;}
	</style>
</head>
<body>
	<div style="background:#ccc;" οnclick="alert('能冒泡到最顶层');">
		<div style="background:#808008;" οnclick="alert('能冒泡到中间层div');">
			<div style="background:red;" οnclick="alert('能冒泡到里层');"></div>
		</div>
	</div>
</body>
</html>

一般地，事件在传递过程中会有一些信息，这些是事件的组成部分：事件发生的时间+事件发生的地点+ 事件的类型+事件的当前处理者+其他信息，

b.终止事件的冒泡

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>事件冒泡案例</title>
	<style type="text/css">
	body{padding: 0;margin:0;}
	div{padding: 100px;}
	</style>
	<script type="text/javascript">
    window.οnlοad=function(){
    	
    	var odiv=document.getElementById('div3');
    	odiv.οnclick=function(ev){
    		var Event=ev||event;
    		Event.alert("要被阻止了");
    		Event.cancelBubble=true;

    	}
    }

	 </script>
</head>
<body>
	<div style="background:#ccc;" οnclick="alert('能冒泡到最顶层');">
		<div style="background:#808008;" οnclick="alert('能冒泡到中间层div');">
			<div id="div3" style="background:red;"></div>
		</div>
	</div>
</body>
</html>

这样添加了cancelBubble之后，点击div3图层的冒泡事件就被阻止了

壹间show

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
javascript事件冒泡

一、事件在浏览器客户端应用平台，基本生都是以事件驱动的，即某个事件发生，然后做出相应的动作。浏览器的事件表示的是某些事情发生的信号。事件的阐述不是本文的重点，尚未了解的朋友，可以访问W3school教程进行了解，这将有助于更好地理解以下的内容。
复制链接

扫一扫