DOM事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段
事件捕获(event capturing)的思想是从不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。
事件冒泡(event bubbling)事件开始时由最具体的元素接受,然后逐级向上传播到较为不具体的节点。
弱耦合性思想是将HTML和javascript分离开来
最初DOM采用方式:
绑定事件: elem.type=fn(){} // 元素名.事件类型=函数名(){} 事件类型 type例如onclick
移除事件: elem.type=null;
DOM2采用方式:
绑定事件: addEventListener(elem,type,bool) // 事件类型 type例如click
移除事件: removeEventLisnter(elem,type,bool)
IE-DOM2采用方式:
绑定事件: attachEvent(elem,type) //事件类型 type例如onclick
移除事件: detachEvent(elem,type)
注:
标准DOM中事件处理程序会在其所属元素的作用域内容行 this === 具体元素
也可以采用 event.target 指向具体元素
IE-DOM1中事件处理程序会在其所属元素的作用域内运行 this === 具体元素
IE-DOM2中事件处理程序会在全局作用域中运行 this === window
要指向具体元素 event.srcElemnt
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventLisener(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;
}
}
}