javascript事件冒泡学习

来源：互联网发布：压缩弹簧计算软件编辑：程序博客网时间：2024/05/23 13:35

事件冒泡概念

在一个对象上触发某类事件（比如单击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事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。

阅读全文

0 0