事件处理程序

DOM2事件处理程序

addEventListener()接收三个参数:

        1、事件名

        2、事件处理函数

        3、布尔值(true表示在捕获阶段,false表示在冒泡阶段)

添加的事件处理程序只能使用removeEventListener()删除,且必须是同一个事件处理函数

IE事件处理程序

attachEvent() 与addEventListerner接收的参数一样,区别是addachEvent()的第一个参数是"onclick",而不是DOM的addEventListener()方法的"click"

删除使用detachEvent()

跨浏览器事件处理程序

addHandler()接收3个参数:

1、目标元素

2、事件名

3、时间处理函数

定义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;
        }
    }
};

        可以像下面这样使用EventUtil对象

let btn = document.getElementById("myBtn")
let handler = function() {
    console.log("Clicked");
};
EventUtil.addHandler(btn, "click", handler);
// 其他代码
EventUtil.removeHandler(btn, "click", handler);

上一篇:Javascrtpt addEventListener()事件监听的几种常用方法


下一篇:JavaScript学习笔记——addEventListener:通用的事件处理程序指定方式