JavaScript 注銷事件

■知識點

在DOM事件模型中，使用removeEventListenerO方法可以從指定對象中刪除己經(jīng)注冊的事件監(jiān)聽函數(shù)。其用法如下：

    element.removeEventListener(String type, Function listener, boolean useCapture);

參數(shù)說明參閱addEventListener()方法參數(shù)說明。

在IE事件模型中，使用detachEvent()方法注銷事件。其用法如下：

    element.detachEvent(etype,eventName)

參數(shù)說明參閱attachEventO方法參數(shù)說明。

■實例設(shè)計

    下面的示例設(shè)計段落標簽<p>僅響應(yīng)一次光標經(jīng)過行為。當(dāng)?shù)?次光標經(jīng)過段落文本時，所注冊的事件不再有效。為了能夠兼容IE事件模型和DOM事件模型，使用if語句判斷當(dāng)前瀏覽器支持的事件處理模型，然后分別使用DOM注冊方法和IE注冊方法為段落文本注冊mouseover和mouseout兩個事件。當(dāng)觸發(fā)mouseout事件之后，再把mouseover和mouseout事件注銷掉。

<P id="p1">注冊兼容性事件</p>

<script>

var p1 = document.getElementByld("pi");

var f1 = function(){

    p1.style.background = 'blue';

}；

var f2 = function(){

    p1.style.background = 'red';

    if(p1.detachEvent){

        p1.detachEvent("onmouseover", fl);

        p1.detachEvent("onmouseout", f2);

    }

    else{

        p1.removeEventListener("mouseover", fl);

        p1.removeEventListener("mouseout", f2);

if(p1.attachEvent){

    p1.attachEvent("onmouseover", f1);

    p1.attachEvent("onmouseout", f2);

}

else {

    p1.addEventListener("mouseover", f1);

    p1.addEventListener("mouseout", f2);

}

</script>

    removeEventListener()方法只能夠刪除addEventListener()方法注冊的事件。如果使用onclick等直接寫在元素上的事件，將無法使用removeEventListener()方法刪除。

    當(dāng)臨時注冊一個事件時，可以在處理完畢之后迅速刪除它，這樣能夠節(jié)省系統(tǒng)資源。