JavaScript 事件监听实例代码[兼容IE,firefox] 含注释

最新推荐文章于 2025-07-06 13:15:03 发布

原创最新推荐文章于 2025-07-06 13:15:03 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#IE #Firefox #JavaScript #XHTML #CSS #ViewUI

本文提供了一个JavaScript事件监听的示例代码，演示了如何使用AddEventHandler方法为不同浏览器（如IE和Firefox）添加事件监听器。示例中创建了36个带有文本的p元素，并为每个元素添加了点击事件监听。

<!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监听"> 
<script type="text/javascript"> 
var oEventUtil = new Object(); 
oEventUtil.AddEventHandler = function(oTarget,sEventType,fnHandler) 
{ 
//IE和FF的兼容性处理 
//如果是FF 
if(oTarget.addEventListener){ 
oTarget.addEventListener(sEventType,fnHandler,false); 
} 
//如果是IE 
else if(oTarget.attachEvent){ 
oTarget.attachEvent('on'+sEventType,fnHandler); 
} else{ 
oTarget['on'+sEventType] = fnHandler; 
} 
}; 
//定义oT事件函数 
var oT = function() 
{ 
var oEvent = arguments[0]; 
var oTarget = oEvent.target || oEvent.srcElement; 
alert(oTarget.tagName+'\n'+oTarget.innerHTML+'\n'+oEvent.type); 
} 
//页面加载时制造36个p，每个p里面显示的文字是Line + i 
window.onload = function(){ 
for(var i = 0;i<36;i++) 
{ 
var oP = document.createElement('p'); 
var oText = document.createTextNode('Line'+i); 
oP.appendChild(oText); 
//在文档的第一个div里面添加这些p 
document.getElementsByTagName('div')[0].appendChild(oP); 
} 
//找到所有的p，并添加click的事件监听 
var oPList = document.getElementsByTagName('p'); 
for(var i = 0;i<oPList.length;i++) 
{ 
oEventUtil.AddEventHandler(oPList[i],'click',oT); 
} 
} 
</script> 
<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>

本文来自: 脚本之家(www.jb51.net) 详细出处参考：http://www.jb51.net/article/19808.htm

addEventListener原来在IE中不可用，在IE中要用attachEvent，
还在想，在FireFox中运行得好好的，怎么到IE下报错了。
处理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; 
} 
};