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 ExpandedBlockStart.gifContractedBlock.gif < script  type ="text/javascript" >
 8var oEventUtil = new Object();
 9oEventUtil.AddEventHandler = function(oTarget,sEventType,fnHandler)
10ExpandedSubBlockStart.gifContractedSubBlock.gif{
11//IE和FF的兼容性处理
12 
13//如果是FF
14ExpandedSubBlockStart.gifContractedSubBlock.gifif(oTarget.addEventListener){
15oTarget.addEventListener(sEventType,fnHandler,false);
16}

17//如果是IE
18ExpandedSubBlockStart.gifContractedSubBlock.gifelse if(oTarget.attachEvent){
19oTarget.attachEvent('on'+sEventType,fnHandler);
20ExpandedSubBlockStart.gifContractedSubBlock.gif}
 else{
21oTarget['on'+sEventType] = fnHandler;
22}

23}
;
24 
25//定义oT事件函数
26var oT = function()
27ExpandedSubBlockStart.gifContractedSubBlock.gif{
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
34ExpandedSubBlockStart.gifContractedSubBlock.gifwindow.onload = function(){
35for(var i = 0;i<36;i++)
36ExpandedSubBlockStart.gifContractedSubBlock.gif{
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++)
47ExpandedSubBlockStart.gifContractedSubBlock.gif{
48oEventUtil.AddEventHandler(oPList[i],'click',oT);
49}

50}

51
</ script >
52  
53  
54 ExpandedBlockStart.gifContractedBlock.gif < style  type ="text/css" >
55*
56ExpandedSubBlockStart.gifContractedSubBlock.gif{}{
57margin:0px;
58padding:0px;
59}

60div
61ExpandedSubBlockStart.gifContractedSubBlock.gif{}{
62margin:10px auto;
63width:690px;
64border:solid 1px #000;
65min-height:600px;
66padding:20px;
67}

68 
69div p
70ExpandedSubBlockStart.gifContractedSubBlock.gif{}{
71padding:4px;
72margin-left:4px;
73margin-top:4px;
74border:solid 1px blue;
75width:100px;
76float:left;
77}

78ExpandedSubBlockStart.gifContractedSubBlock.gifpre{}{
79margin:20px 0 0 0;
80}

81a
82ExpandedSubBlockStart.gifContractedSubBlock.gif{}{
83text-indent:4em;
84}

85
</ style >
86 </ head >
87 < body  >
88
89 < div >
90 </ div >
91 </ body >
92 </ html >

转载于:https://www.cnblogs.com/zhaoshun/archive/2009/01/16/1376834.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值