软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：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>

技术文章快速查找

Jquery 方块随着鼠标所在的区域而放大

javascript 密码框防止用户粘贴和复制的实现代码

Jquery实现自定义tooltip示例代码

JScript 脚本实现文件下载一般用于下载木马

AJAX 仿EXCEL表格功能

jQuery 文本框模拟下拉列表效果

倒记时60刷新网页的js代码

jquery左边浮动到一定位置时显示返回顶部按钮

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建