JS事件（一）事件流&事件處理程序

一、事件流描述的是從頁面接收事件的順序

IE和Netscape提出了幾乎徹底相反的事件流概念

IE：事件冒泡（由內而外）

Netscape：事件捕獲（由外向內）

DOM2級事件規定事件流包括三個階段：事件捕獲階段、處於目標階段、事件冒泡階段

二、爲事件指定處理程序的方式

2.一、HTML事件處理程序

<script>
    function fun(){
    alert('clicked');
}
</script>
<button onclick="func()">click me</button>

 缺點：一、時差  二、html代碼語JavaScript代碼耦合緊密，不易改動

2.二、DOM0級事件處理程序

獲取要操做對象的引用

給對象的事件處理程序屬性（如onclick）設置屬性值爲函數

以這種方式添加的事件會在事件流的冒泡階段被處理

 

var btn=document.getElementById('btn');
btn.onclick=function(){
    alert(1);
}

 

刪除DOM0級事件處理程序：

 

btn.onclick = null;

 

2.三、DOM2級事件處理程序

var btn=document.getElementById("btn");
btn.addEventListener("click",function(){
    alert("hello");
},false);

三個參數：事件、處理函數、事件處理階段（true捕獲false冒泡）

最大的優勢：能夠爲一個對象添加多個事件，不會相互覆蓋，而是按某種順序依次執行

移除事件：

var btn=document.getElementById("btn");
function fun(){
    alert("hello");
}
btn.addEventListener("click",fun,false);
btn.removeEvemtListener("click",fun,false);

注意：removeEventListener()不能移除匿名函數，像下面這樣也是無效的：

var btn=document.getElementById("btn");
btn.addEventListener("click",function(){
    alert("hello");
},false);

btn.removeEventListener("click",function(){
    alert("hello");
},false);

添加和移除的被認做兩個不一樣的函數

大多數狀況下，都是將事件處理程序添加到事件流的冒泡階段，這樣能夠最大程度兼容各類瀏覽器

2.四、IE事件處理程序

IE8-瀏覽器值支持事件冒泡

有兩個相似的方法：attachEvent()和detachEvent()

 

var btn=document.getElementById("btn");
function fun(){
    alert(this===window);//true
}
btn.attachEvent("click",fun);
btn.detachEvent("click",fun);

 

總結：DOM2級和IE事件處理程序有何不一樣之處？

1.做用域：DOM2級事件處理與DOM0事件處理同樣，做用域在當前元素(btn)的做用域中，IE事件處理程序的做用域是全局：window；

2.參數：個數不一樣，IE事件處理程序只支持冒泡；

3.是否有'on'：DOM2無：'click',IE有：'onclick';

4.都支持添加多個事件，但執行順序相反：DOM2按添加順序，IE相反。

兼容瀏覽器的事件處理對象，如下：

 

var EventUtil={
        addHandler:function(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }
            else if(element.attachEvent){
                element.attachEvent('on'+type,handler);
            }
            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,handler);
            }
            else{
                element['on'+type]=null;
            }
        }
        
    }