JavaScript封装DOM事件处理程序eventUtil的低级错误排查

DOM事件处理程序封装背景

为了实现跨浏览器兼容，通常需要将DOM 0级事件、DOM2级事件以及IE特有的事件处理机制统一封装到一个名为eventUtil的对象中。具体实现代码如下：

var eventUtil = {
// 添加事件句柄
addEventHandler: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;
}
},
// 删除事件句柄
removeEventHandler: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;
},
// 获取事件的类型
getType:function (event) {
return event.type;
},
// 获取事件对象目标
getTarget:function (event) {
if (event.target) {
return event.target;
}else{
return event.srcElement;
}
},
// 阻止事件冒泡
stopPropagation:function (event) {
if (event.stopPropagation) {
event.stopPropagation();
}else{
event.cancelBubble=true;
}
},
// 阻止事件默认行为
preventDefault:function (event) {
if (event.preventDefault) {
event.preventDefault();
}else{
event.returnValue=false;
}
}
}

常见错误排查与修正

在编写和测试这段封装代码的过程中，我遇到并修正了几个导致运行失败的低级错误。在此进行记录，以便加深印象并避免日后重犯。

首先是参数传递顺序的问题。在addEventHandler(element, type, handler)函数中，三个参数分别代表目标元素、事件类型和处理函数。初学者容易将handler与后续addEventListener调用中的false（表示冒泡阶段）的位置搞混，导致参数传递错位。

经过仔细思考，明确了addEventHandler所需的参数含义及对应位置后，最终修正了代码，未造成实质性错误。

解决此类问题的关键在于深入理解函数签名并牢固记忆参数顺序。

其次，在IE事件处理程序的判断分支中，出现了attachEvent和detachEvent方法的拼写错误，漏写了“Event”部分，仅写成了attach或detach。

这种拼写错误虽然不会直接抛出语法异常，但会导致addEventHandler和removeEventHandler方法在IE浏览器中无法正确添加或删除事件监听器。

解决方法是通过多加练习来牢记正确的API名称：attachEvent和detachEvent。

③遗漏了在IE事件处理程序attachEvent与detachEvent的参数中事件类型需添加"on"；误写为attachEvent(type,handler)。正确写法应为attachEvent("on"+type,handler)，同时遗漏了对DOM0级事件处理判断分支的处理

这同样导致IE下的事件封装失效，无法通过封装的方法成功添加或移除事件。

除了记住正确的调用方式外，还需注意DOM 0级事件的赋值形式，即element["on"+type]。例如，element["on"+"click"]在功能上等价于element.onclick。

最后一个常见的语法错误是在对象最后一个属性（如preventDefault）的定义末尾多加了一个逗号。具体代码片段如下（见注释部分）：

preventDefault:function (event) {
if (event.preventDefault) {
event.preventDefault();
}else{
event.returnValue=false;
}
},//最后一个属性preventDefault完成后加了逗号，会出错
}

这一多余的逗号在IE浏览器中运行时会引发报错。错误发生在event.js的第54行（即逗号所在的下一行），而test.html的第10行因调用了event.js中的eventUtil.addEventHandler方法而间接受到影响。

解决此问题的方法非常直接：删除对象最后一个属性定义后的多余逗号。

此外，还存在拼写错误，即在IE中用于阻止事件冒泡的属性cancelBubble被误写为cancelBubbles（多了一个s）。

该错误不会抛出异常，但会导致无法在IE浏览器中有效阻止事件冒泡。

解决方法是将属性名修正为正确的cancelBubble。

以上总结了在JavaScript中将DOM事件处理程序封装为event.js时可能出现的几种低级错误及其解决方案，希望对读者有所帮助。如有任何疑问，欢迎留言讨论，小编会及时回复。感谢大家的支持！