0级DOM分为2个:一是在标签内写onclick事件
二是在JS写onlicke=function(){}函数
2级DOM
只有一个:监听方法,原生有两个方法用来添加和移除事件处理程序:addEventListener()和removeEventListener()。
它们都有三个参数:第一个参数是事件名(如click);
第二个参数是事件处理程序函数;
第三个参数如果是true则表示在捕获阶段调用,为false表示在冒泡阶段调用。
- addEventListener():可以为元素添加多个事件处理程序,触发时会按照添加顺序依次调用。
- removeEventListener():不能移除匿名添加的函数。
区别:如果定义了两个dom0级事件,dom0级事件会覆盖
dom2不会覆盖,会依次执行
dom0和dom2可以共存,不互相覆盖,但是dom0之间依然会覆盖
//EventUtil
var EventUtil = {addHandler: function (element, type, handler) {
if (element.addEventListener) { //DOM2级
element.addEventListener(type, handler, false);
} else if (element.attachEvent) { //DOM1级
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler; //DOM0级
}
},
removeHandler: function (element, type, handler) { //类似addHandler
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
}
var btn1 = document.getElementById("myBtn1");
var handler = function () {
alert("hello handler");
}
EventUtil.addHandler(btn1, "click", handler);