jq事件冒泡

什么是事件冒泡

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

事件冒泡的作用

事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
表现事件冒泡的代码

 
    
 
        
 
             
            点击我 
             
        
 
    
 

从这个代码就可以看出事件冒泡的过程，只点击了“点击我”，就会依次弹出“我是最里层—->我是中间层—->我是最外层—->然后再链接到百度. ”，本来只点击ID为hr_three的标签，但执行了三个alert的操作；过程：hr_three—->divTwo—->divOne。从最里层冒泡到最外层。

四种阻止冒泡的方法

1. even.stopPropagation();

even.stopPropagation():终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。 此时点击“点击我”，就阻止了事件冒泡，但不会阻止默认行为，会弹出“我是最里层”，然后链接到百度

2. return false;

点击“点击我”，会弹出“我是最里层”，但不会链接到百度 作用是：事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）

3. event.preventDefault();

点击“点击我”，会发现它依次弹出：我是最里层—->我是中间层—->我是最外层，但最后却没有跳转到百度 作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转） 注：一个事件起泡对应触发的是上层的同一事件 如果在click事件中，在你要处理的事件之前加上e.preventDefault();那么就取消了行为（通俗理解：相当于做了个return操作），不执行之后的语句了。