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

最新推荐文章于 2024-04-03 16:58:48 发布
最新推荐文章于 2024-04-03 16:58:48 发布
阅读量89 收藏
点赞数
文章标签： IE Firefox JavaScript XHTML CSS ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_7125/article/details/81761919
版权 
<!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>

本文来自: 脚本之家(www.jb51.net) 详细出处参考：http://www.jb51.net/article/19808.htm

 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; 
} 
};

 

iteye_7125
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 经典实例盘点（收藏向）
Silvia
07-03 1万+
快捷目录一、跨 浏 览 器 事 件跨浏览器添加事件跨浏览器移除事件跨浏览器阻止默认行为跨浏览器获取目标对象跨浏览器获取滚动条位置跨浏览器获取可视窗口大小二、js 对 象 冒 充三、js异步加载和同步加载四、js获取屏幕坐标五、PageX和clientX六、js 拖 拽 效 果七、js获取图片原始大小尺寸八、js循环遍历数组九、阻止表单重复提交十、字 符 串 部 分十一、Number和Math部分十二、数 组 部 分十三、Date日期时间部分十四、正 则 部 分十五、js判断传入参数是否为质数十六、js判断字
attachEvent，addEventListener，监听事件兼容ie
chuijian2218的博客
05-11 232
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...
添加事件监听兼容IE6-8
weixin_30699235的博客
02-22 109
IE8一下浏览器不支持addEventListener，用attachEvent取而代之，但是在时间类型前面要加上’on‘，例如click时间在attachEvent中要写成onclick。 var addEvent = function (o, e, f) { 　　o.addEventListener ? o.addEventListener(e, f, false) : o.at...
js事件监听及解除事件监听兼容性写法
weixin_45792701的博客
05-05 1975
<div id="box" style="width: 200px;height: 200px;background-color: pink;"></div> <script> var box = document.getElementById('box'); function fun() { alert(1); } //事件监听 function add...
jQuery 监听输入框输入（兼容IE8）
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
07-27 1280
因 IE9以下版本的浏览器不兼容 oninput事件，所以经常使用 keyup + change的组合事件来完成，但是体验有所欠缺。 其实 IE早已有与 oninput事件相同功能的事件 onpropertychange。 方法封装： /* 对象级别插件扩展 */ $.fn.extend({ onInput:function (callback) { ...
JavaScript 经典实例收集整理
前端达人
02-01 192
作者 | trigkit4来源 | segmentfault.com/a/1190000002559158跨浏览器事件跨浏览器添加事件//跨浏览器添加事件 function add...
JavaScript 常用实例收集
小黄鸡kimhuhg
02-20 515
跨浏览器添加事件//跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent){//IE obj.attchEvent('on'+type,fn); } }跨浏览器移除事件//跨浏览器移除事件 func
JavaScript 经典实例，收藏一波吧
祈澈菇凉
05-09 356
作者：trigkit4https://segmentfault.com/a/1190000002559158跨浏览器事件跨浏览器添加事件//跨浏览器添加事件 function ad...
JavaScript简介
lh11223326的博客
04-03 1888
HTML用来定义网页的内容，如图片，文本。CSS用来控制网页的外观，如颜色，字体，背景等等JavaScript用来实时更新网页中的内容，如从服务获取数据并更新到网页中，修改某些标签的演示或中的内容等，可以让网页更加生动。
底部固定悬浮工具栏jQuery代码兼容ie6+主流浏览器
04-28
"底部固定悬浮工具栏jQuery代码兼容ie6+主流浏览器"这个资源提供了这样一个功能的实现，适用于多种浏览器环境，包括Internet Explorer 6到9以及Chrome和Firefox。 jQuery是一款广泛使用的JavaScript库，简化了...
javascript日历控件 兼容ie firefox opera
03-10
在“javascript日历控件 兼容ie firefox opera”这个主题中，我们主要探讨的是一个能够同时在Internet Explorer（IE）、Firefox和Opera等主流浏览器上正常运行的JavaScript日历组件。 1. **日历控件的基本功能**： ...
网页漂浮代码，兼容IE ，firefox
02-23
在本案例中，提供的“漂浮代码”已经过优化，兼容Internet Explorer（IE）和Firefox，这两款浏览器在过去的互联网环境中占据了重要地位，尤其是IE，尽管现在已被Edge取代，但在某些场合仍有用户在使用。 要实现跨...
传感器驱动+imx296驱动+Linux驱动
08-10
传感器驱动+imx296驱动+Linux驱动
ASP校园论坛的设计与实现(源代码+论文).rar
08-10
资源包主要包含以下内容： ASP项目源码：每个资源包中都包含完整的ASP项目源码，这些源码采用了经典的ASP技术开发，结构清晰、注释详细，帮助用户轻松理解整个项目的逻辑和实现方式。通过这些源码，用户可以学习到ASP的基本语法、服务器端脚本编写方法、数据库操作、用户权限管理等关键技术。 数据库设计文件：为了方便用户更好地理解系统的后台逻辑，每个项目中都附带了完整的数据库设计文件。这些文件通常包括数据库结构图、数据表设计文档，以及示例数据SQL脚本。用户可以通过这些文件快速搭建项目所需的数据库环境，并了解各个数据表之间的关系和作用。 详细的开发文档：每个资源包都附有详细的开发文档，文档内容包括项目背景介绍、功能模块说明、系统流程图、用户界面设计以及关键代码解析等。这些文档为用户提供了深入的学习材料，使得即便是从零开始的开发者也能逐步掌握项目开发的全过程。 项目演示与使用指南：为帮助用户更好地理解和使用这些ASP项目，每个资源包中都包含项目的演示文件和使用指南。演示文件通常以视频或图文形式展示项目的主要功能和操作流程，使用指南则详细说明了如何配置开发环境、部署项目以及常见问题的解决方法。 毕业设计参考：对于正在准备毕业设计的学生来说，这些资源包是绝佳的参考材料。每个项目不仅功能完善、结构清晰，还符合常见的毕业设计要求和标准。通过这些项目，学生可以学习到如何从零开始构建一个完整的Web系统，并积累丰富的项目经验。
Unity课程设计报告书PDF
最新发布
08-10
1.技术需求: 此游戏是在Unity5.3.3上开发出来的，Unity5.3.3可以支持2D、3D场景 的编辑，本游戏是基于3D场景开发的。游戏中的脚本语言使用的是C#, Unity5.3.3中的Monodevelop为脚本编辑提供了平台。 2.功能需求: Flappy Bird 是一款益智类的小游戏，其玩法为:游戏开始后，玩家需间歇 性的点击鼠标，让小鸟向上飞，不会掉下来，并且要穿过随机出现的管道的间隙， 不能碰到管道，碰到就游戏结束，穿过一个管道就可以得到一分。其制作包括对 以下六大功能的需求: (1)当开始游戏后，玩家需要单击指定位置才能开始游戏，否则无法开始: (2)需要通过点击屏幕来控制小鸟的位置，完成使小鸟上下移动的功能: (3)需要对小鸟是否碰到地面或者管道进行判断，从而决定游戏是否结束: (4)需要设置触发器以实现场景的延续，当小鸟碰到触发器，场景中的第一幅 背景便挪到最后一幅的后面，从而实现视觉上场景不断出现的效果: (5)需要对玩家进行记分，并对最高分进行判断和存储: (6)在失败后，需要使玩家通过点击按钮重新开始游戏。
毕业设计，基于ASP+ACCESS开发的民航售票管理系统，内含完整源代码，数据库，毕业论文
08-10
毕业设计，基于ASP+ACCESS开发的民航售票管理系统，内含完整源代码，数据库，毕业论文 随着计算机及网络技术的飞速发展，Internet/Intranet应用在全球范围内日益普及，当今社会正快速向信息化社会前进，信息自动化的作用也越来越大。 从而使我们从繁杂的事务中解放出来，提高了我们的工作效率。 本论文主要阐述一个功能比较强大的企业网站系统的后台操作过程及一些关键技术。该系统信息来源主要由用户直接添加，通过管理员审核后,在网站上发布出来,以供大家查询相关公司信息。本系统主要让社会各界能更好的了解本本企业，欢迎对本企业的发展提出更多宝贵留言。该企业网站系统是前台应用Dreamweaver MX、FireworksMX、Flash MX等软件，后台结合ASP编程技术和Access数据库技术开发出来的。 关键词：用户管理；信息发布；ASP；企业网站
Kubernetes指南+Kubernetes安装全流程，让你彻底学会Kubernetes
08-10
Kubernetes指南+Kubernetes安装全流程，让你彻底学会Kubernetes
JavaScript日历插件兼容IE与Firefox实现方法
总结来说，本文档提供了一个JavaScript日期选择插件的代码片段，它注重在IE和Firefox等浏览器上的兼容性，通过动态调整日期选择模式和初始化行为，确保了用户的交互体验在不同浏览器环境下都能正常工作。对于前端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值