本文介绍如何在 JavaScript 中实现兼容 IE 与 Firefox 的事件监听。通过判断浏览器支持的标准 addEventListener 或 IE 特有的 attachEvent,封装统一的 AddEventHandler 方法,解决跨浏览器事件绑定差异。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript事件监听完整实例(含注释)</title> <meta name="generator" content="editplus" /> <meta name="Keywords" content="AddEventHandler,addEventListener,attachEvent,appendChild,getElementsByTagNamem,createElement,createTextNode,IE与FF兼容性,JavaScript事件,JavaScript监听"> <style type="text/css"> * { margin:0px; padding:0px; } div { margin:10px auto; width:690px; border:solid 1px #000; min-height:600px; padding:20px; } div p { padding:4px; margin-left:4px; margin-top:4px; border:solid 1px blue; width:100px; float:left; } pre{ margin:20px 0 0 0; } a { text-indent:4em; } </style> </head> <body > <div> </div> </body> </html>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
IE 与 Firefox 事件监听差异
addEventListener 原来在 IE 中不可用,在 IE 中要用 attachEvent,
还在想,在 FireFox 中运行得好好的,怎么到 IE 下报错了。
兼容 IE 与 FireFox 事件监听的对象
处理 IE 与 FireFox 事件监听的对象:
var oEventUtil = new Object();
oEventUtil.AddEventHandler = function(oTarget,sEventType,fnHandler)
{
if(oTarget.addEventListener){
oTarget.addEventListener(sEventType,fnHandler,false);
} else if(oTarget.attachEvent){
oTarget.attachEvent('on'+sEventType,fnHandler);
} else{
oTarget['on'+sEventType] = fnHandler;
}
};
本站编辑注:一般情况下是没问题的,但在实际使用中,对于事件对象,需要用
oEventUtil.AddEventHandler(document.getElementById("jb51"),'click',oT);