原生js--事件綁定、事件監聽器及事件解綁

一、事件綁定

事件綁定方式有三種

 1、內聯模式

　　這種方式是最簡單直接的事件處理方式，在內聯模型中事件處理函數是HTML標簽的屬性，用於處理指定事件，但不符合結構、樣式、行為相分離的原則。

//以onclick為例
<button onclick="clickMe()">點我</button>
<script>
　　function clickMe(){
　　　　alert("你點我了！！")
　　}
</script>

2、外聯模式

　　由於內聯模式違反了代碼層次分離原則，為了讓代碼看起來更簡潔直觀，我們可以直接在js代碼中處理事件

<button id="btn">點我</button>
<script>
    btn.onclick = function(){
        alert("你還點我！！");
　　}
</script>

　　這兩種方式都使用的是“on+事件類型”綁定事件的方法，而使用這種方法綁定有弊端：同一事件只能給同一元素綁定一次

　　也就是說，在內聯模式中，一個元素綁定多個事件時，只會執行第一個事件，而在外聯模式中，一個元素綁定多個事件時，后面的事件會覆蓋前面的事件

如下代碼（外聯模式）：

<button id="btn">點我</button>
<script>
　　btn.onclick=function(){
　　    alert("第一次點我！");
　　}
　　btn.onclick=function(){
　　    alert("第二次點我！");　　//兩個相同的點擊事件
　　}
</script>

 

3、事件監聽器

為了解決前面兩種方式所帶來的問題，我們就有了第三種綁定事件的方式，也就是事件監聽器

 

二、事件監聽器

addEventListener()語法：

obj.addEventListener(type,handle,false);
// 參數1：給元素綁定的事件類型，如：click，mouseover。。。
// 參數2：處理事件的函數
// 參數3：是否在冒泡階段執行，true在捕獲階段執行，false在冒泡階段執行，可選項

注意點：1、這一綁定方式可以給同一元素綁定多個事件，不會發生覆蓋的情況。如果給同一個元素綁定多個事件，那么采用先綁定先執行的規則 順序執行
　　　　2、在綁定事件的時候，事件類型前不需帶 on 
　　　　3、第三個參數表示是否在捕獲階段執行
　　　　4、可以使用 removeEventListener() 來移除之前綁定過的事件
例：

<button id="btn">點我</button>
<script>
btn.addEventListener("click",handle,false);        //第一次綁定
function handle(){
    alert("第一次點擊");
}
btn.addEventListener("click",handle1,false);        //第二次綁定
function handle1(){
    alert("第二次點擊");
}
</script>

可以看到，使用事件監聽器的方式對同一元素多次綁定的事件都可以執行！

當然啦，這么好用的東西怎么可能沒有兼容問題呢，低版本IE中沒有事件監聽，那么針對於IE低版本瀏覽器的事件監聽器綁定方式也是有的：

attachEvent()語法：

obj.attachEvent('on' + type,handle);
// type表示事件類型
// handle表示處理事件的函數

　注意點：1、與addEventListener()不同的是，在綁定事件時事件類型前一定要加 on 

　　　　　2、而與addEventListener()第二個不同點在於，如果給同一元素綁定多個事件時，采用先綁定后執行的規則  倒序執行

　　　　　3、attachEvent()是針對低版本IE的寫法，低版本IE中不存在捕獲階段，所以沒有第三個參數

　　　　　4、使用detachEvent()移除綁定過的事件

 

　既然針對於不同瀏覽器的事件監聽器都有了，我們就可以有兼容寫法了

　看好了，要出大招了！！

事件監聽器綁定兼容寫法

function bind(ele,type,handle){　　// 要綁定的事件對象 ，事件類型 ， 事件處理函數 2     if(ele.addEventListener){
        ele.addEventListener(type,handle,false);
    }else if(ele.detachEvent){
        ele.attachEvent("on"+type,handle);
    }else{
        ele["on" + type] = callback;
    }
}    

 

三、事件解綁

　一般情況下，執行過的代碼內存會自動回收，但是事件在執行完后，內存沒有自動回收，這樣會導致內存一直占用，代碼執行效率降低，所以我們就要手動回收這個事件 -- 事件解綁

　1、使用“on+事件類型”方式綁定的事件，只要給他賦值為 null ，就能解綁

un.onclick=function(){
    btn.onclick=null; // 給事件賦值一個空，就解綁了
}

　2、使用事件監聽器的方式綁定的事件解綁方式

　　針對於addEventListener()的解綁方式

removeEventListener(ele,type, handle)
// 第一個參數：要解綁的事件對象
// 第二個參數：事件類型
// 第三個參數：事件處理函數

　　

　針對於attachEvent()的解綁方式

detachEvent(ele,type, handle)
// 第一個參數：要解綁的事件對象
// 第二個參數：事件類型
// 第三個參數：事件處理函數

 

　事件綁定有兼容寫法，事件解綁同樣有兼容寫法：

function unbind(ele,type,handle){
　　if(ele.addEventListener){
　　　　ele.removeEventListener(type,handle,false);
　　}else if(ele.detachEvent){
　　　　ele.detachEvent("on"+type,handle);
　　}else{
　　　　ele["on" + type] = null;
　　}
}    

 

事件解綁通常適用於在事件執行一次后，就不再執行了，就可以在下一次動作中進行解綁

事件解綁有利於性能優化