JavaScript 事件监听实例代码[兼容IE,firefox] 含注释
作者:bea
<!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&g
<!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+'
'+oTarget.innerHTML+'
'+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(""),'click',oT);
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- javascript concat数组累加 示例
- ie focus bug 解决方法
- javascript 24小时弹出一次的代码(利用cookies)
- 使用jQuery的ajax功能实现的RSS Reader 代码
- 一步一步教你写一个jQuery的插件教程(Plugin)
- 动态样式类封装JS代码
- JS URL传中文参数引发的乱码问题
- jquery 导航设计实现代码 学习jquery的朋友可以看下
- FF IE兼容性的修改小结
- js 获取浏览器高度和宽度值(多浏览器)
- 获取URL地址中的文件名和参数的javascript代码
- Javascript 判断函数类型完美解决方案
- javascript 控制 html元素 显示/隐藏实现代码
- jsTree树控件(基于jQuery, 超强悍)[推荐]
- JavaScript 继承详解 第一篇
- JavaScript 应用技巧集合[推荐]
- 用cssText批量修改样式
- javascript appendChild,innerHTML,join性能比较代码
- IE 条件注释详解总结(附实例代码)