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

<!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监听"> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20oEventUtil%20%3D%20new%20Object()%3B%20%0D%0AoEventUtil.AddEventHandler%20%3D%20function(oTarget%2CsEventType%2CfnHandler)%20%0D%0A%7B%20%0D%0A%2F%2FIE%E5%92%8CFF%E7%9A%84%E5%85%BC%E5%AE%B9%E6%80%A7%E5%A4%84%E7%90%86%20%0D%0A%2F%2F%E5%A6%82%E6%9E%9C%E6%98%AFFF%20%0D%0Aif(oTarget.addEventListener)%7B%20%0D%0AoTarget.addEventListener(sEventType%2CfnHandler%2Cfalse)%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E5%A6%82%E6%9E%9C%E6%98%AFIE%20%0D%0Aelse%20if(oTarget.attachEvent)%7B%20%0D%0AoTarget.attachEvent('on'%2BsEventType%2CfnHandler)%3B%20%0D%0A%7D%20else%7B%20%0D%0AoTarget%5B'on'%2BsEventType%5D%20%3D%20fnHandler%3B%20%0D%0A%7D%20%0D%0A%7D%3B%20%0D%0A%2F%2F%E5%AE%9A%E4%B9%89oT%E4%BA%8B%E4%BB%B6%E5%87%BD%E6%95%B0%20%0D%0Avar%20oT%20%3D%20function()%20%0D%0A%7B%20%0D%0Avar%20oEvent%20%3D%20arguments%5B0%5D%3B%20%0D%0Avar%20oTarget%20%3D%20oEvent.target%20%7C%7C%20oEvent.srcElement%3B%20%0D%0Aalert(oTarget.tagName%2B'%5Cn'%2BoTarget.innerHTML%2B'%5Cn'%2BoEvent.type)%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E9%A1%B5%E9%9D%A2%E5%8A%A0%E8%BD%BD%E6%97%B6%E5%88%B6%E9%80%A036%E4%B8%AAp%EF%BC%8C%E6%AF%8F%E4%B8%AAp%E9%87%8C%E9%9D%A2%E6%98%BE%E7%A4%BA%E7%9A%84%E6%96%87%E5%AD%97%E6%98%AFLine%20%2B%20i%20%0D%0Awindow.onload%20%3D%20function()%7B%20%0D%0Afor(var%20i%20%3D%200%3Bi%3C36%3Bi%2B%2B)%20%0D%0A%7B%20%0D%0Avar%20oP%20%3D%20document.createElement('p')%3B%20%0D%0Avar%20oText%20%3D%20document.createTextNode('Line'%2Bi)%3B%20%0D%0AoP.appendChild(oText)%3B%20%0D%0A%2F%2F%E5%9C%A8%E6%96%87%E6%A1%A3%E7%9A%84%E7%AC%AC%E4%B8%80%E4%B8%AAdiv%E9%87%8C%E9%9D%A2%E6%B7%BB%E5%8A%A0%E8%BF%99%E4%BA%9Bp%20%0D%0Adocument.getElementsByTagName('div')%5B0%5D.appendChild(oP)%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E6%89%BE%E5%88%B0%E6%89%80%E6%9C%89%E7%9A%84p%EF%BC%8C%E5%B9%B6%E6%B7%BB%E5%8A%A0click%E7%9A%84%E4%BA%8B%E4%BB%B6%E7%9B%91%E5%90%AC%20%0D%0Avar%20oPList%20%3D%20document.getElementsByTagName('p')%3B%20%0D%0Afor(var%20i%20%3D%200%3Bi%3CoPList.length%3Bi%2B%2B)%20%0D%0A%7B%20%0D%0AoEventUtil.AddEventHandler(oPList%5Bi%5D%2C'click'%2CoT)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
<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需刷新才能执行]

　　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;

　　}

　　};

　　管理资源吧编辑注：一般情况下是没问题的，但在实际使用中，对于事件对象，需要用

　　oEventUtil.AddEventHandler(document.getElementById(""),'click',oT);

教程首页更多教程