JavaScript事件监听完整实例（含注释）

 

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  >
< pre >
              代码来源网络。
              JutinYoung稍作整理并注释，更多相关文章请访问：
</ pre >
< a href = " http://justinyoung.cnblogs.com "  target = " _blank " > http: // justinyoung.cnblogs.com</a>
 
< div >
</ div >
</ body >
</ html >

posted @ 2007-06-06 22:36 阿一(杨正祎) 阅读(1145) 评论(4)   编辑 收藏 所属分类: JavaScript脚本

发表评论

   回复   引用   查看     

#1楼  2008-06-06 16:20 | 求知无傲       

想请教杨兄，如何编制可操作性强的JAVASCRIPT命名和编码规范如注释等等文档，因为查了下，充斥在网络上的有很多是教条主义，更多的是千篇一律，借鉴的意义不大。多谢先。

   回复   引用   查看     

#2楼  [ 楼主]2008-06-07 15:58 | 杨正祎(阿一)       

我觉得这个主要是个人习惯和公司要求吧。别人给你的的确不一定有什么意义，至少我是这样感觉的。呵呵～～

   回复   引用   查看     

#3楼  2008-06-09 09:14 | 求知无傲       

偶又迟到了。汗…………
自己挖坑，自己跳呗。呵呵。