javascript事件冒泡学习

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

RecordInLife

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

阅读量268

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/itzhengmaolin/article/details/76418194

版权

javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

事件冒泡概念

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

博客:

http://www.cnblogs.com/webflash/archive/2009/08/23/1552462.html 事件冒泡的定义、阻止

http://blog.csdn.net/hzw2312/article/details/7260359 冒泡图解

http://blog.csdn.net/luanlouis/article/details/23927347 冒泡图解

http://www.cnblogs.com/yahari/articles/4739880.html 事件触发过程图解

http://www.cnblogs.com/Chen-XiaoJun/p/6210987.html 冒泡事件和事件捕获的函数该如何写

http://blog.csdn.net/qq_28602957/article/details/60475123 true,事件捕获；false,事件冒泡。默认false,即事件冒泡。

小结:

1、事件冒泡是发生在包含关系的对象中的,而不会发生在兄弟对象关系之间

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery.js"></script>
	
</head>
<body>
	<!-- 演示点击不同的对象,可在不同的浏览器下测试会得到不同的捕获方法 -->
	<div >
		<button>阿牛</button>
		<p>dianwo damd a </p>
	</div>
	<script type="text/javascript">
	$("div").click(function(){
		alert("div");
	})
	$("body").click(function(){
		alert("body");
	})
	$("button").click(function(){
		alert("button");
		console.log($("body").click)
	})
	$("p").click(function(){
		alert("p");
	})
	$("body").click(function(){
		alert("body");
	})
	$(document).click(function(){
		alert("document");
	})
	$(window).click(function(){
		alert("window");
	})
	</script>
</body>
</html>

2、DOM事件模型的最独特的性质是，文本节点也触发事件(在IE不会)。见博客2

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

4、当一个DOM事件被触发时，它不仅仅只是单纯地在本身对象上触发一次，而是会经历三个不同的阶段：

捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象；
目标阶段：到达目标事件位置（事发地），触发事件；
冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。

5、对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如，click事件会一直冒泡到document层次。也就是说，我们可以为整个页面指定一个onclick事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。