本文提供了一个JavaScript事件监听的完整示例代码，通过该示例，读者可以了解到如何为多个元素添加点击事件监听器，并实现跨浏览器兼容性处理。
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<title>JavaScript事件监听完整实例（含注释）</title>
5<meta name="generator" content="editplus" />
6<meta name="Keywords" content="AddEventHandler,addEventListener,attachEvent,appendChild,getElementsByTagNamem,createElement,createTextNode,IE 与FF兼容性,JavaScript事件,JavaScript监听">
7
<script type="text/javascript">
8
var oEventUtil = new Object();
9oEventUtil.AddEventHandler = function(oTarget,sEventType,fnHandler)
10
{
11//IE和FF的兼容性处理
12
13//如果是FF
14if(oTarget.addEventListener){
15oTarget.addEventListener(sEventType,fnHandler,false);
16
}
17//如果是IE
18else if(oTarget.attachEvent){
19oTarget.attachEvent('on'+sEventType,fnHandler);
20} else{
21oTarget['on'+sEventType] = fnHandler;
22}
23};
24
25//定义oT事件函数
26var oT = function()
27{
28var oEvent = arguments[0];
29var oTarget = oEvent.target || oEvent.srcElement;
30alert(oTarget.tagName+'\n'+oTarget.innerHTML+'\n'+oEvent.type);
31}
32
33//页面加载时制造36个p，每个p里面显示的文字是Line + i
34window.onload = function(){
35for(var i = 0;i<36;i++)
36{
37var oP = document.createElement('p');
38var oText = document.createTextNode('Line'+i);
39oP.appendChild(oText);
40//在文档的第一个div里面添加这些p
41document.getElementsByTagName('div')[0].appendChild(oP);
42}
43
44//找到所有的p，并添加click的事件监听
45var oPList = document.getElementsByTagName('p');
46for(var i = 0;i<oPList.length;i++)
47{
48oEventUtil.AddEventHandler(oPList[i],'click',oT);
49}
50
}
51</script>
52
53
54<style type="text/css">
55*
56{}{
57margin:0px;
58padding:0px;
59}
60div
61{}{
62margin:10px auto;
63width:690px;
64border:solid 1px #000;
65min-height:600px;
66padding:20px;
67}
68
69div p
70{}{
71padding:4px;
72margin-left:4px;
73margin-top:4px;
74border:solid 1px blue;
75width:100px;
76float:left;
77}
78pre{}{
79margin:20px 0 0 0;
80}
81a
82{}{
83text-indent:4em;
84}
85</style>
86</head>
87<body >
88
89<div>
90</div>
91</body>
92</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<title>JavaScript事件监听完整实例（含注释）</title>5
<meta name="generator" content="editplus" />6
<meta name="Keywords" content="AddEventHandler,addEventListener,attachEvent,appendChild,getElementsByTagNamem,createElement,createTextNode,IE 与FF兼容性,JavaScript事件,JavaScript监听">7
<script type="text/javascript">8
var oEventUtil = new Object();9
oEventUtil.AddEventHandler = function(oTarget,sEventType,fnHandler)10
{11
//IE和FF的兼容性处理12
13
//如果是FF14
if(oTarget.addEventListener){15
oTarget.addEventListener(sEventType,fnHandler,false);16
}17
//如果是IE18
else if(oTarget.attachEvent){19
oTarget.attachEvent('on'+sEventType,fnHandler);20
} else{21
oTarget['on'+sEventType] = fnHandler;22
}23
};24
25
//定义oT事件函数26
var oT = function()27
{28
var oEvent = arguments[0];29
var oTarget = oEvent.target || oEvent.srcElement;30
alert(oTarget.tagName+'\n'+oTarget.innerHTML+'\n'+oEvent.type);31
}32
33
//页面加载时制造36个p，每个p里面显示的文字是Line + i34
window.onload = function(){35
for(var i = 0;i<36;i++)36
{37
var oP = document.createElement('p');38
var oText = document.createTextNode('Line'+i);39
oP.appendChild(oText);40
//在文档的第一个div里面添加这些p41
document.getElementsByTagName('div')[0].appendChild(oP);42
}43
44
//找到所有的p，并添加click的事件监听45
var oPList = document.getElementsByTagName('p');46
for(var i = 0;i<oPList.length;i++)47
{48
oEventUtil.AddEventHandler(oPList[i],'click',oT);49
}50
}51
</script>52
53
54
<style type="text/css">55
*56
{}{57
margin:0px;58
padding:0px;59
}60
div61
{}{62
margin:10px auto;63
width:690px;64
border:solid 1px #000;65
min-height:600px;66
padding:20px;67
}68
69
div p70
{}{71
padding:4px;72
margin-left:4px;73
margin-top:4px;74
border:solid 1px blue;75
width:100px;76
float:left;77
}78
pre{}{79
margin:20px 0 0 0;80
}81
a82
{}{83
text-indent:4em;84
}85
</style>86
</head>87
<body >88
89
<div>90
</div>91
</body>92
</html>
扫一扫
942
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
