js冒泡和捕获是事件的两种行为，使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。使用event.preventDefault()可以取消默认事件。

在说事件冒泡之前，我们先说说事件对象（Event）

Event

  1. 在触发DOM上某个事件时，会产生一个事件对象event，这个对象包含着所有事件有关的信息（导致事件的元素、事件的类型、与特定事件相关的信息）
  2. 所有浏览器都支持Event对象，但支持方式不同
  3. IE中的事件对象：window.event
/*
  封装Event对象
  IE：window.event
*/
function getEvent(event){
   return event?event:window.event;
}

事件冒泡

  1. 什么是事件冒泡
  1. 即事件开始时由最具体的元素（文档中嵌套最深的那个元素）接收，然后逐级向上传播到较不为具体的节点
  2. 所有浏览器都支持事件冒泡

 

对于冒泡和捕获的优先顺序，总结而言就是：

先捕获，后冒泡，捕获从上到下，冒泡从下到上（形象点说法：捕获像石头沉入海底，冒泡则像气泡冒出水面）

  • 捕获 阶段：在事件对象到达事件目标之前，事件对象必须从window经过目标的祖先节点传播到事件目标。 这个阶段被我们称之为捕获阶段。在这个阶段注册的事件监听器在事件到达其目标前必须先处理事件。
  • 目标 阶段：事件对象到达其事件目标。 这个阶段被我们称为目标阶段。一旦事件对象到达事件目标，该阶段的事件监听器就要对它进行处理。如果一个事件对象类型被标志为不能冒泡。那么对应的事件对象在到达此阶段时就会终止传播。
  • 冒泡 阶段： 事件对象以一个与捕获阶段相反的方向从事件目标传播经过其祖先节点传播到window。这个阶段被称之为冒泡阶段。在此阶段注册的事件监听器会对相应的冒泡事件进行处理。
  1. 阻止事件冒泡
  1. DOM中提供stopPropagation()方法，但IE不支持，使用event对象在事件函数中调用就行
  2. IE中提供的是，cancelBubble属性，默认为false，当它设置为true时，就是阻止事件冒泡，也是用event对象在事件函数中调用/* 
/*封装事件冒泡函数：
         document.all:判断浏览器是否是IE
         IE：cancelBubble
         Firefox：stopPropagation
        */
        function stopPropagation(e){
             var e = window.event || e;
             if(document.all){
                  e.cancelBubble = true;
             }else{
                  e.stopPropagation();
             }
        }
  1. jQuery中提供了stopPropagation()方法来停止事件冒泡，当需要时，只需用用event对象来调用就行，即event.stopPropagation();

默认行为

  1. 什么是默认行为
  1. 网页元素，都有自己的默认行为，例如，单击超链接会跳转...
  1. 阻止默认行为
  1. DOM中提供preventDefault()方法来取消事件默认行为，但是只有当cancelable属性设置为true的事件，才可以使用preventDefault()来取消事件默认行为，使用event对象在事件函数中调用就行
  2. IE中提供的是returnValue属性，默认为true，当它设置为false时，就是取消事件默认行为，也是用event对象在事件函数中调用 
/* 封装阻止元素的默认行为函数 
IE：returnValue DOM：preventDefault 
*/ 
function preventDefaultAction(event){ 
    var event = window.event || event; 
    if(document.all){ //支持IE 
        event.returnValue = false; 
    }else{ //IE不支持 
        event.preventDefault(); 
    }
 }
  1. jQuery中提供了preventDefault()方法来阻止元素的默认行为，只需要用event对象来调用就好，即event.preventDefault()
  1. 如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false。这是对事件对象同时调用stopPropagation()方法和preventDefault()方法的一种简写方式