添加/移除事件處理程序

---

本文整理自《JavaScript高級程序設計》（第3版）。

1. HTML事件處理程序

添加事件:

//在HTML標簽中給特性指定函數(shù)： onclick="" <input id="myBtn" type="button" value="Click Me" onclick="showMessage()" />

移除事件：

無法移除。

2. DOM0級事件處理程序

添加事件:

//給DOM0元素的事件處理程序屬性賦值 var btn = document.getElementById("myBtn");btn.onclick = showMessage();

移除事件：

//給屬性賦 null btn.onclick = null;

3. DOM2級事件處理程序

添加事件:

//調用 addEventListener(要處理的事件名，作為事件處理程序的函數(shù)，布爾值) //--要處理的事件名："click","load","mouseover" //--作為事件處理程序的函數(shù)：定義的函數(shù)，或匿名函數(shù) //--布爾值：false，冒泡階段調用事件處理程序；true，事件捕獲階段調用事件處理程序 btn.addEventListener("click", showMessage(), false);//可添加多個事件處理程序，事件發(fā)生時依次觸發(fā)，即先執(zhí)行showMessage1()，再執(zhí)行showMessage2() btn.addEventListener("click", showMessage1(), false); btn.addEventListener("click", showMessage2(), false);

移除事件：

//調用 removeEventListener(要處理的事件名，作為事件處理程序的函數(shù)，布爾值) //--傳入?yún)?shù)同添加事件的 addEventListener() 中的參數(shù)保持一致 //**以匿名函數(shù)作為事件處理程序函數(shù)的事件無法移除 btn.removeEventListener("click", showMessage(), false);

4. IE事件處理程序

添加事件:

//調用 attachEvent(事件處理程序名，作為事件處理程序的函數(shù)) //--事件處理程序名："onclick","onload" //--作為事件處理程序的函數(shù)：定義的函數(shù)，或匿名函數(shù) btn.attachEvent("onclick", showMessage());

移除事件：

//調用 detachEvent(事件處理程序名，作為事件處理程序的函數(shù)) //--傳入?yún)?shù)同添加事件的 attachEvent() 中的參數(shù)保持一致 //**以匿名函數(shù)作為事件處理程序函數(shù)的事件無法移除 btn.detachEvent("onclick", showMessage());

5. 跨瀏覽器的事件處理程序

綜合上述多重情況，定義了一個可跨瀏覽器實現(xiàn)的對象 EventUtil，用于實現(xiàn)不同瀏覽器的添加/刪除事件的方法：

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;}},};

轉載于:https://www.cnblogs.com/gpeng/p/4787061.html

總結

以上是生活随笔為你收集整理的添加/移除事件处理程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。