要实现一个跨浏览器事件工具,需要考虑浏览器之间的差异以及提供简单易用的 API。下面是一个可能的实现:
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;
}
},
// 获取事件对象
getEvent: function(event) {
return event ? event : window.event;
},
// 获取事件目标
getTarget: function(event) {
return event.target || event.srcElement;
},
// 阻止事件默认行为
preventDefault: function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 停止事件传播
stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
上面的代码包含了五个方法,分别是 addHandler、removeHandler、getEvent、getTarget 和 preventDefault、stopPropagation。这些方法提供了一种简单的方式来跨浏览器处理事件。可以使用 addHandler 和 removeHandler 来添加和删除事件处理程序,使用 getEvent 来获取事件对象,使用 getTarget 来获取事件目标,使用 preventDefault 和 stopPropagation 来阻止事件的默认行为和停止事件传播。