javascript跨浏览器的事件处理函数处理DOM2级事件兼容。在前面介绍到了有关事件的相关操作。主要涉及了事件处理程序;事件类型;事件流;事件方面的性能优化等很多事件的知识。本篇文章继续为大家讲解事件方面的东西,主要是如何书写能够跨浏览器的事件处理函数。目的是解决掉DOM2级的IE和FF(火狐)对事件不同的语法。
事件兼容
事件绑定:addEventListener与attachEvent
事件移除:removeEventListener与detachEvent
获取事件对象:e.target与 window.event.srcElement
阻止冒泡:e.stopPropagation与window.event.cancelBubble
阻止默认:e.preventDefault与window.event.returnValue
具体的实现代码
<!doctype html>
<html>
<head>
<title>跨浏览器的事件处理函数——处理DOM2级事件兼容——独行冰海</title>
<meta charset=’utf-8′ />
</head>
<body>
<p id=’con’>内容<a href=”" id=’def’>独行冰海-跨浏览器的事件处理函数——处理DOM2级事件兼容</a></p>
<script type=”text/javascript”>
/*调试*/
addEventHandler(def,’click’,preDefault);
addEventHandler(def,’click’,stopBubble);
/*类库*/
/*事件绑定*/
function addEventHandler(obj,eventName,handler) {
if (document.attachEvent) {
obj.attachEvent(‘on’+eventName,handler);
}else if (document.addEventListener) {
obj.addEventListener(eventName,handler,false);
}
}
/*事件移除*/
function removeEventHandler(obj,eventName,handler) {
if (document.detachEvent) {
obj.detachEvent(‘on’+eventName,handler);
}else if (document.removeEventListener) {
obj.removeEventListener(eventName,handler,false);
}
}
/*获取事件对象*/
function eventTarget(evt) {
var evt = evt||window.event;
var targetElement = evt.target||evt.srcElement;
return targetElement;
}
/*阻止冒泡*/
function stopBubble(evt) {
var evt = evt||window.event;
if (evt.stopPropagation) {
evt.stopPropagation();
}
else {
window.event.cancelBubble = true;
}
}
/*阻止默认*/
function preDefault(evt){
var evt=event||window.event;
if (evt&&evt.preventDefault) {
evt.preventDefault();
}
else {
window.event.returnValue = false;
}
}
</script>
</body>
</html>