由于ie和其它浏览器的区别,在对DOM进行事件注册的和使用event对象的时候,需要一种快捷的封装好的工具方法。
var EventUtil = {
addHandler: function(element, type, handler) {
if (element.addEventListener) { //dom2级事件处理程序
element.addEventListener(element, type, handler);
} else if (element.attachEvent) { //检测ie的事件处理程序
element.attachEvent('on' + type, handler);
} else {
element['on' + type] = handler; //dom0级事件处理程序
}
},
getEvent: function(event) {
return event ? event : window.event;
},
getTarget: function(event) {
return event.target ? event.target : event.srcElement;
},
preventDefault: function(event) { //阻止默认行为,比如链接的跳转,表单的提交
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false; //ie下阻止默认行为
}
},
removeHandler: function(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(element, type, handler);
} else if (element.detachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] == null;
}
},
//由于事件在dom层中传播会造成事件捕捉和事件冒泡,这里直接在元素上添加事件而阻止其在
dom中传播
stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
上面就是封装的一个工具对象用法大概如下
oDiv.onclick = function(event) {
event = EventUtil.getEvent(event);
var target = event.getTarget(event);
EventUtil.stopPropgation(event);
}