添加/移除事件处理程序

添加/移除事件处理程序

---

本文整理自《JavaScript高级程序设计》（第3版）。

1. HTML事件处理程序

添加事件:

//在HTML标签中给特性指定函数： 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(要处理的事件名，作为事件处理程序的函数，布尔值)
//--要处理的事件名："click","load","mouseover"
//--作为事件处理程序的函数：定义的函数，或匿名函数
//--布尔值：false，冒泡阶段调用事件处理程序；true，事件捕获阶段调用事件处理程序
btn.addEventListener("click", showMessage(), false);

//可添加多个事件处理程序，事件发生时依次触发，即先执行showMessage1()，再执行showMessage2()
btn.addEventListener("click", showMessage1(), false);
btn.addEventListener("click", showMessage2(), false);

移除事件：

//调用 removeEventListener(要处理的事件名，作为事件处理程序的函数，布尔值)
//--传入参数同添加事件的 addEventListener() 中的参数保持一致
//**以匿名函数作为事件处理程序函数的事件无法移除
btn.removeEventListener("click", showMessage(), false);

4. IE事件处理程序

添加事件:

//调用 attachEvent(事件处理程序名，作为事件处理程序的函数)
//--事件处理程序名："onclick","onload"
//--作为事件处理程序的函数：定义的函数，或匿名函数
btn.attachEvent("onclick", showMessage());

移除事件：

//调用 detachEvent(事件处理程序名，作为事件处理程序的函数)
//--传入参数同添加事件的 attachEvent() 中的参数保持一致
//**以匿名函数作为事件处理程序函数的事件无法移除
btn.detachEvent("onclick", showMessage());

5. 跨浏览器的事件处理程序

综合上述多重情况，定义了一个可跨浏览器实现的对象 EventUtil，用于实现不同浏览器的添加/删除事件的方法：

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