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

更新时间：2009年08月29日 15:14:54 作者：

JavaScript事件监听完整实例含注释，非常的不错，大家可以直接使用。

<!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>

[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("jb51"),'click',oT);

您可能感兴趣的文章:

JS数组的赋值介绍
本篇文章主要是对JS数组的赋值进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-03-03
js实现烟花特效
这篇文章主要为大家详细介绍了js实现烟花效果，实现鼠标点击出现模拟烟花爆炸的特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
微信小程序媒体组件详解（视频，音乐，图片）
这篇文章主要为大家详细介绍了微信小程序媒体组件的相关资料，包括视频，音乐，图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09
原生js添加一个或多个类名的方法分析
这篇文章主要介绍了原生js添加一个或多个类名的方法,结合实例形式分析了javascript针对页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
2019-07-07
javascript实现起伏的水波背景效果
这篇文章主要为大家详细介绍了javascript实现起伏的水波背景效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-05-05
固定表格行列(expression)在IE下适用
本文为大家介绍下使用expression固定表格行列，这是一种在IE下适用的固定行列的方法，感兴趣的朋友可以学习下，希望对大家有所帮助
2013-07-07
JavaScript之Map和Set_动力节点Java学院整理
这篇文章主要为大家详细介绍了JavaScript之Map和Set的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
JS实现的数字格式化功能示例
这篇文章主要介绍了JS实现的数字格式化功能,结合实例形式分析了javascript针对数字与字符的相关运算处理技巧,需要的朋友可以参考下
2017-02-02
JS写谷歌浏览器chrome的外挂实例
本篇文章主要给大家讲解了一个用JS写出的谷歌浏览器的怪挂实例，以及给大家分享了其中的代码，有兴趣的朋友学些下。
2018-01-01
JS实现随机点名系统
这篇文章主要为大家详细介绍了JS实现随机点名系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04