JQuer事件冒泡详解

前言：记录自己在工作中遇到的小问题，积少成多！因为是新手，有什么写的不好的地方还希望大家指出来。有什么更好的方法还希望大家提出来，一起交流学习！（小弟先在这里谢谢大家）

正文：

一、时间冒泡

默认情况下，事件使用事件冒泡流。当事件（例如单击事件）在某一DOM事件上被触发时，事件将沿着该节点的各个父节点冒泡穿过整个DOM节点层次。在冒泡过程中的任何时候都可以终止事件的冒泡。如果不停止事件的传播，事件将一直通过DOM直至到达文档根部。

  
  
  


  

    外层div元素
    内层span元素
  
  

当点击内层span元素时，即触发元素的click事件，会输出3条记录。

即：

内层span元素被点击

外出div元素被点击

body元素被点击

这就是事件冒泡引起的

二、事件冒泡引发的问题

1、事件对象

在程序中使用事件对象，只需要为函数添加一个参数，Jquery代码如下

$('element').bind('click',function(event){ //event:事件对象
 
});

2、停止事件冒泡

在Jqyery里面提供了stopPropagation()方法来阻止事件冒泡

以span元素绑定click事件为例：

//为span元素绑定click事件
      $('span').bind('click', function (event) { //event:事件对象
        var txt = $('#msg').html() + '
内层span元素被点击
';
        $('#msg').html(txt);
        event.stopPropagation(); //停止事件冒泡
      });

当点击内层span元素时，即触发span元素的click事件，这个时候只会输出一条语句

即：

内层span元素被点击

这样就解决了事件冒泡

3、阻止默认行为

网页中的元素有自己默认的行为，例如：单击超链接以后会跳转，单击“提交”表单会提交。

在Jquery里提供了preventDefault()方法来阻止默认事件。

以输入提交为例

  
  
  


  

    用户名:
    
  
  

如果不输入内容，这样就可以阻止默认行为。

总结：

如果同时对事件停止冒泡和阻止默认行为，可以在事件处理函数中返回false。这是对在事件对象上同时调用stopPropagation()和preventDefault()的一种简写。

例如上面的例子就可以把

event.preventDefault(); //阻止默认行为（表单提交）

改写为：return false;

也可以把事件冒泡中的event.stopPropagation(); //停止事件冒泡

改写为：return false;

4、事件捕获

5、事件对象的属性