js事件綁定

時間 2019-11-19

原文原文鏈接

事件綁定，常見的是odiv.onclick=function(){..........}; 這種方式綁定事件太單一，若是綁定多個，那麼最後一個事件會覆蓋掉以前的，也就是說只執行最後一次綁定的事件，這裏要說的是addEventListener方法，和IE下的attachEvent方法：html

html代碼以下：瀏覽器

<html>
 <head>
 </head>
<style>
#box{
    height:400px;
    width:400px;
    background: red;
}
#son1{
    height:300px;
    width:300px;
    background: green;
}
#son2{
    height:200px;
    width:200px;
    background: purple;
}
 </style>
 <script>

</script>
 <body>
    <div id='box'>box
        <div id='son1'>son1
            <div id='son2'>son2

            </div>
        </div>
    </div>
      
 </body>
 </html>

界面以下圖：

下面是<script>中的代碼(非IE瀏覽器下addEventListener)：函數

 window.onload=function(){
    var obox=document.getElementById('box');
    var oson1=document.getElementById('son1');
    var oson2=document.getElementById('son2');

    oson2.addEventListener('click',function(){alert('son2 dinaji');})
    oson1.addEventListener('click',function(){alert('son1 dinaji');})
    obox.addEventListener('click',function(){alert('box dinaji');})
}

上述代碼的addEventListener（）只有兩個參數，其實還有第三個參數：true/false 。默認的是false，表明在冒泡階段調用事件處理程序，true表明在事件捕獲階段處理程序，

生活中仍是以冒泡階段處理爲多。下面是IE下：code

 window.onload=function(){
    var obox=document.getElementById('box');
    var oson1=document.getElementById('son1');
    var oson2=document.getElementById('son2');

oson2.attachEvent('onclick',function(){alert('son2 dinaji');})
    oson1.attachEvent('onclick',function(){alert('son1 dinaji');})
    obox.attachEvent('onclick',function(){alert('box dinaji');})

}

IE下attachEvent()只有兩個參數，沒有第三個參數的true或false。由於IE默認的就只能是冒泡階段捕獲，這是當年瀏覽器大戰的緣由，我的猜想，多是由於IE用戶量多吧，致使如今默認的都是在冒泡階段處理。
事件綁定最大的好處是能夠綁定多個事件，對同一個元素對象上綁定的多個事件來講，非IE下這些事件的處理順序是符合代碼綁定的前後順序的，但在IE下對於多個事件綁定的處理順序正好相反。如：

非IE：htm

oson2.addEventListener('click',function(){alert('first');},true);  //先彈出 first
oson2.addEventListener('click',function(){alert('second');},true); //後彈出 second

IE：

oson2.attachEvent('onclick',function(){alert('first');});      //後彈出first
oson2.attachEvent('onclick',function(){alert('second');}); //先彈出second

既然能綁定事件，確定能取消綁定事件，非IE下爲removeEventListener(),IE 下爲detachEvent() ，這裏須要注意的是括號內的參數必須和事件綁定時的參數同樣，但對於匿名函數來講，哪怕函數同樣也取消不了綁定，由於二者被認爲是不一樣的，以下代碼就取消不了綁定：

oson2.addEventListener('click',function(){alert('first');}); 
oson2.removeEventListener('click',function(){alert('first');}) //取消綁定不成功

本人又用了函數聲明式嘗試一下發現也不行：對象

oson2.addEventListener('click',function test(){alert('first');});   
oson2.removeEventListener('click',function test(){alert('first');});

如上面兩段代碼所述把匿名函數function (){alert('first');} 改成function test(){alert('first');}同樣不行。事件

結論：無論是匿名函數，仍是函數聲明都視爲不一樣參數，不能成功取消綁定。

解決方法就是先聲明一個函數，二者傳入共同的函數名便可：

先聲明函數：ip

var test=function(){alert('first');};

再把函數名當參數傳入：

oson2.addEventListener('click',test);
oson2.removeEventListener('click',test); //成功取消綁定

以上代碼是能成功的，但還要注意第三個參數也要一致，上述代碼沒有第三個參數則默認都是false，若是一個爲true，那也不能取消成功：

oson2.addEventListener('click',t,true); //第三個參數爲true表示 捕獲時執行事件程序
oson2.removeEventListener('click',t);   //默認爲false ，不一樣的參數，不能取消綁定

二者都爲true便可：

oson2.addEventListener('click',t,true);
oson2.removeEventListener('click',t,true);

下面是爲解決瀏覽器兼容封裝事件綁定：

function addEvent(element,event,fun){
    if(element.addEventListener)
    {
        element.addEventListener(event,fun);
    }
    else if(element.attachEvent)
    {
        element.attachEvent('on'+event,fun);//注意要加on
    }
}

下面是取消事件綁定的封裝：

function removeEvent(element,event,fun){
    if(element.removeEventListener)
     {
        element.removeEventListener(event,fun);
     }
    else if(element.detachEvent)
    {
        element.detachEvent('on'+event,fun);//注意要加on
    }

}

封裝後再使用事件綁定和取消綁定就方便不少：

var t=function(){alert(' box ');};
var t1=function(){alert(' son1 ');};
var t2=function(){alert(' son2 ');};

綁定：

addEvent(obox,'click',t);
addEvent(oson1,'click',t1);
addEvent(oson2,'click',t2);

取消綁定：

removeEvent(obox,'click',t);
removeEvent(oson1,'click',t1);
removeEvent(oson2,'click',t2);

以上就是事件綁定的內容，也是本身的一次回顧。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。