JavaScript 事件監(jiān)聽實(shí)例代碼[兼容IE,firefox] 含注釋

2019-11-21 01:10:39

字體：大中小

供稿：網(wǎng)友

<!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事件監(jiān)聽完整實(shí)例（含注釋）</title> <meta name="generator" content="editplus" /> <meta name="Keywords" content="AddEventHandler,addEventListener,attachEvent,appendChild,getElementsByTagNamem,createElement,createTextNode,IE與FF兼容性,JavaScript事件,JavaScript監(jiān)聽"> <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事件函數(shù) var oT = function() { var oEvent = arguments[0]; var oTarget = oEvent.target || oEvent.srcElement; alert(oTarget.tagName+'/n'+oTarget.innerHTML+'/n'+oEvent.type); } //頁面加載時(shí)制造36個(gè)p，每個(gè)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); //在文檔的第一個(gè)div里面添加這些p document.getElementsByTagName('div')[0].appendChild(oP); } //找到所有的p，并添加click的事件監(jiān)聽 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>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

addEventListener原來在IE中不可用，在IE中要用attachEvent，
還在想，在FireFox中運(yùn)行得好好的，怎么到IE下報(bào)錯(cuò)了。
處理IE與FireFox事件監(jiān)聽的對象：
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;
}
};
武林網(wǎng)編輯注：一般情況下是沒問題的，但在實(shí)際使用中，對于事件對象，需要用
oEventUtil.AddEventHandler(document.getElementById("jb51"),'click',oT);

上一篇：IE 條件注釋詳解總結(jié)（附實(shí)例代碼）

下一篇：基于jQuery的ajax功能實(shí)現(xiàn)web service的json轉(zhuǎn)化