JavaScript 事件冒泡和事件捕捉

含义

事件冒泡

事件的触发顺序为，由内而外。直到文档最顶层（document或window）。

事件捕捉

事件的触发顺序为，由外而内。

像blur,focus,load,unload不支持冒泡。
任何发生在w3c事件模型中的事件，首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段。

//使用事件捕捉模式
element1.addEventListener('click',doSomething2,true)
//使用事件冒泡模式（默认）
element2.addEventListener('click',doSomething,false)

阻止冒泡

even.stopPropagation();

//只输出 a标签  里层div,但是超链接依旧跳转。
//该方法只能阻止冒泡，不能阻止默认行为。
<div id="parent-div">
   <div id="child-div">
       <a href="#">点击我</a>
   </div>
</div>
<script type="text/javascript">
   $("#parent-div").click(function () {
       console.log("外层div");
   });
   $("#child-div").click(function (even) {
       console.log("里层div");
       even.stopPropagation();
   });
   $("a").click(function () {
       console.log("a标签");
   });
</script>

return false;

//即阻止默认行为，也阻止冒泡
<div id="parent-div">
    <div id="child-div">
        <a href="www.baidu.com">点击我</a>
    </div>
</div>
<script type="text/javascript">
    $("#parent-div").click(function () {
        console.log("外层div");
    });
    $("#child-div").click(function (even) {
        console.log("里层div");
        return false;
    });
    $("a").click(function () {
        console.log("a标签");
    });
</script>

event.preventDefault();

//只阻止默认行为，而不阻止冒泡。
//event.preventDefault()；放在任何一层中，都会阻止。
<div id="parent-div">
    <div id="child-div">
        <a href="www.baidu.com">点击我</a>
    </div>
</div>
<script type="text/javascript">
    $("#parent-div").click(function () {
        console.log("外层div");
    });
    $("#child-div").click(function (even) {
        console.log("里层div");
    });
    $("a").click(function (even) {
        console.log("a标签");
        even.preventDefault();
    });
<script>

事件对象event

支持至少DOM2级的浏览器所有事件的事件对象，都会有的成员。

属性/方法	类型	读写	解释
bubbles	Boolean	只读	表明事件是否冒泡
stopPropagation()	Function	只读	取消事件的进一步捕获或冒泡，如果bubbels为true，则可以使用这个方法
cancelable	Boolean	只读	表明是否可以取消事件的默认行为
preventDefault()	Function	只读	取消事件的默认行为，如果cancelable为true，则可以使用这个方法
currentTarget	Element	只读	其事件处理程序当前正在处理事件的那个元素
target	Element	只读	事件的目标
detail	Integar	只读	与事件相关的细节信息
eventPhase	Integar	只读	调用事件处理程序的阶段：1表示捕获阶段2表示处于目标3表示冒泡阶段
type	String	只读	被触发的事件的类型
view	AbstractView	只读	与事件关联的抽象视图。等同于发生事件的window对象

在IE8及其以前版本的浏览器是不兼容DOM2级的，但是还是可以使用dom0级的方法添加事件处理程序。

属性/方法	类型	读写	解释
cancelBubble	Boolean	读写	默认值为false，但将其设置为true就可以取消事件冒泡，与DOM中stopPropagation()的方法作用相同
returnvalue	Boolean	读写	默认值为true，但将其设置为fasle，就可以取消事件的默认行为，与DOM中的preventDefault()方法的作用相同
srcElement	Element	只读	事件的目标，与DOM中的target属性相同
type	String	只读	被触发的事件类型

兼容性处理对象

var EventUtil={
    getEvent:function(event){ //获取事件对象
        return event||window.event;
    },
    getTarget:function(event){ //获取事件目标
        return event.target||event.srcElement;
    },
    preventDefault:function(){ //阻止默认行为
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue=false;
        }
    },
    stopPropagation:function(){ //阻止冒泡
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble=true;
        }
    },
    addHandler:function(element,type,handler){ //注册事件
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
             element["e"+type]=function(){
              handler.call(element)
          }
            element.attachEvent("on"+type,element["e"+type]);
        }else{
            element["on"+type]=handler;
        }
    },
    removeHandler:function(element,type,handler){ //移除事件
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+type,element["e"+type]);
            element["e"+type]=null;   
        }else{
            element["on"+type]=null;
        }
    }

};