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

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

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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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;
}
};
我们编辑注：一般情况下是没问题的，但在实际使用中，对于事件对象，需要用
oEventUtil.AddEventHandler(document.getElementById("jb51"),'click',oT);

赞 (0)

相关推荐

  • JavaScript监听文本框回车事件并过滤文本框空格的方法

    本文实例讲述了JavaScript监听文本框回车事件并过滤文本框空格的方法.分享给大家供大家参考.具体如下: <script type="text/javascript" language="javascript"> var username = null; var password = null; //获取文本框 onload = function() { username = document.getElementById("txtUser

  • javascript在事件监听方面的兼容性小结

    1,IE使用attachEvent/detachEvent方法来添加和删除事件监听器:w3c使用addEventListener/removeEventListener方法. 2,IE对其事件使用onevent的命名方式,而w3c的是event的命名方式. 3,IE事件监听器内使用的是一个全局的Event对象,而w3c是将event对象作为参数传递给监听器. 4,为了避免触发默认的事件行为,IE的做法是要求程序员设置Event对象中的returnValue属性值为false,而w3c的做法是执行

  • JavaScript监听和禁用浏览器回车事件实例

    js监听浏览器回车事件,可以支持ie6+,火狐,谷歌等浏览器. 复制代码 代码如下: <html> <head> <script type="text/javascript"> //注册键盘事件 document.onkeydown = function(e) {  //捕捉回车事件  var ev = (typeof event!= 'undefined') ? window.event : e;  if(ev.keyCode == 13) {  

  • JavaScript 监听textarea中按键事件

    有个textarea, Java代码 复制代码 代码如下: <textarea id="text"></textarea> 经常会定义onKeyPress="keypress();",并定义以下方法. 复制代码 代码如下: var keypress = function(e){ var e = e || window.event; var k = e.keyCode; } 这里我使用的办法是JQuery. 复制代码 代码如下: $("

  • 深入浅析JavaScript中对事件的三种监听方式

    事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了. 第一种监听方式,也是最普遍使用的方式,是直接在代码上加载事件,产生效果: <table> <tr onmouseover='this.style.backgroundColor="red"' onmouseout='this.style.backgroundColor=""'><td>

  • javascript 传统事件模型构造的事件监听器实现代码

    代码如下: 复制代码 代码如下: var br={}; br.eventRouter = {}; br.eventRouter.addListen = function(el,eventType,func){ if(!el.eventObjs){ el.eventObjs = {}; } if(!el.eventObjs[eventType]){ el.eventObjs[eventType]=[]; br.eventRouter.bindListen(el,eventType); } el.e

  • javascript监听鼠标滚轮事件浅析

    我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动.这些都是通过js对鼠标滚轮的事件监听来实现的.今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听. 不同浏览器不同的事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件

  • 在JavaScript中监听IME键盘输入事件

    输入法应当如何触发键盘事件呢?是每一下击键都触发一次事件,还是选词完毕才触发事件呢?整句输入又该如何触发事件呢?不同的操作系统和不同的浏览器对此有不同的看法.在最糟糕的情况下,用户使用输入法后浏览器就只触发一次 keydown ,之后就没有任何的键盘事件了.这对于 Suggestion 控件的实现来说是个大问题,因为 Suggestion 控件需要监听文本输入框的变化,而事件是最准确也最节省计算资源的做法,如果换成轮询的话性能就可能受到影响. 首先,要监听启用输入法后的击键事件应当使用 keyd

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

    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(o

  • JAVA用户自定义事件监听实例代码

    JAVA用户自定义事件监听实例代码 很多介绍用户自定义事件都没有例子,或是例子不全,下面写了一个完整的例子,并写入了注释以便参考,完整的实例源代码如下: package demo; import Java.util.EventObject; /** * Title: 事件处理类,继承了事件基类 * Description: * Copyright: Copyright (c) 2005 * Company: cuijiang * @author not attributable * @versi

  • javascript事件监听与事件委托实例详解

    本文实例讲述了javascript事件监听与事件委托.分享给大家供大家参考,具体如下: 事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件委托的方式来进行事件的监听. 每个事件都经历三个阶段 捕获 到达目标 冒泡 事件委托需要用到事件的冒泡,冒泡就是事件发生时,上层会一层一层的接收这个事件. 如下页面结构: <body> <div id=&qu

  • javascript 组合按键事件监听实现代码

    javascript 组合按键事件监听实现代码 JS组合按键事件监听,支持同时监听多组按键如{a,b,c,}{ctrl,c}. 实例代码: <script type="text/javascript"> (function(){ /** *dqKeys v1.0.0 | (c) 2016 www.findme.wang *@params json keys 监听的按键 *@params bool isOrder 按键是否有相应的顺序 *@params Function su

  • vue各种事件监听实例(小结)

    计算属性的Get方法和Set方法 看代码说话: <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue小练习</title> </head> <body> <div id="calc"> <a v-cloak="">{{name}}</a> &l

  • ListView-添加item的事件监听实例

    1. 点击事件(OnItemClickListener) onItemClick(AdapterView<?> parent, View view, int position, long id) parent:官方解释为:The AdapterView where the click happened,也就是用户所点击的AdapterView,这个参数一般不用. view:当前点击的列表项所对应的布局View对象,可通过这个参数获得相应的列表项内部的组件,进而对其进行操作.举个例子,假设有一个

  • Android网络状态实时监听实例代码(二)

    上篇文章给大家介绍了Android 网络状态实时监听代码实例(一),感兴趣的朋友可以点击了解详情,本文接着给大家介绍android网络状态监听相关知识,具体内容如下所示: 在开发android应用时,涉及到要进行网络访问,时常需要进行网络状态的检查,以提供给用户必要的提醒.一般可以通过ConnectivityManager来完成该工作. ConnectivityManager有四个主要任务: 1.监听手机网络状态(包括GPRS,WIFI, UMTS等) 2.手机状态发生改变时,发送广播 3.当一

  • 微信小程序 实现拖拽事件监听实例详解

    微信小程序 实现拖拽事件监听实例详解

    微信小程序 拖拽监听功能: 在软件开发或者 APP应用开发的时候,经常会遇到拖拽监听,最近自己学习微信小程序的知识,就想实现这样的拖拽效果,这里就记录下. 需要做个浮在scroll-view之上的button.尝试了一下. 上GIF: Android中也会有类似移动控件的操作.思路差不多.获取到位移的X Y 的变量,给控件设置坐标. 1.index.wxml ../images/gundong.png" bindtap="ballClickEvent" style="

  • Javascript添加监听与删除监听用法详解

    本文实例讲述了Javascript添加监听与删除监听的用法.分享给大家供大家参考.具体分析如下: js中事件监听就是利用addEventListener来绑定一个事件,这个用法在jquery中非常常用并且简单,但在原生js中比较复杂,这里整理了addEventListener事件各方法的测试与例子供大家参考学习. 在前两天做播放器的时候添加监听后删除监听遇到了一点麻烦,删不掉,后来看了一下才发现,参数需要完全对应,什么叫完全对应呢,换句话说: 复制代码 代码如下: $('.video')[0].

  • 分享jQuery3种常见事件监听方式

    目录 1.HTML标签内联事件 2.用JavaScript实现事件监听 3.用jQuery实现事件监听 前言: 在 Web 页面经常会有各种事件发生,事件发生后需要进行一些特定处理,即执行特定的函数或者语句.这就需要对事件进行监听,监听事件的常见方式有以下三种,本文将通过实例来具体介绍. 1.HTML标签内联事件 实例1:单击页面 "Hello" 按钮,弹出提示框显示 Hello world! <!doctype html> <html> <head>

随机推荐