js事件冒泡

最新推荐文章于 2024-07-08 08:31:14 发布

iteye_11116

最新推荐文章于 2024-07-08 08:31:14 发布

阅读量103

点赞数

分类专栏： js 文章标签： js事件冒泡

本文链接：https://blog.csdn.net/iteye_11116/article/details/82639182

版权

js 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>

	<script type="text/javascript">
		
		window.οnlοad= function() {
			document.getElementById('hr_three').οnclick=function(event) {
	                event.stopPropagation();
	         		alert('我是最里层！');
	         };

		}
	</script>

</head>
<body>
<div id="divOne" οnclick="alert('我是最外层');" style="border:1px solid gray;padding:8px;">
	<div id="divTwo" οnclick="alert('我是中间层！')" style="border:1px solid red;padding:8px;">
		<a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com">点击我</a>
	</div>
</div>
</body>
</html>


通过以上方式我们可以处理，当我们在子节点和父节点上都注册同一类事件时，子类事件的触发不会影响到父类事件，冒泡是由内向外的

什么是JS事件冒泡？：

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

以下代码就会一直向上冒泡：

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>

	<script type="text/javascript">
		
		/*window.οnlοad= function() {
			document.getElementById('hr_three').οnclick=function(event) {
	                event.stopPropagation();
	         		alert('我是最里层！');
	         };

		}*/
	</script>

</head>
<body>
<div id="divOne" οnclick="alert('我是最外层');" style="border:1px solid gray;padding:8px;">
	<div id="divTwo" οnclick="alert('我是中间层！')" style="border:1px solid red;padding:8px;">
		<a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com" οnclick="">点击我</a>
	</div>
</div>
</body>
</html>

写道

http://blog.sina.com.cn/s/blog_a322154901015qkk.html

iteye_11116

关注

0
点赞
踩
0

收藏

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

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript"&gt; window.onload= fun
复制链接

扫一扫

专栏目录