IE和Firefox下event乱谈

如果在使用javascript的时候涉及到event处理,就需要知道event在不同的浏览器中的差异,因为javascript的事件模型有三种,它们分别是NN4、IE4+和W3C/Safari;这也造成了在不同的浏览器中处理event的差异,这里结合一些零碎的代码来说明如何做到event在IE4+和Firefox下的正常工作。首先看如下代码:

function doEventThing(eventTag){     

   var event = eventTag||window.event;     

   var currentKey = event.charCode||event.keyCode;     

   var eventSource =window.event.srcElement||eventTag.target;     

}

  这段代码主要是为了处理键盘事件的,在IE中event作为window对象的一个属性可以直接使用,但是在Firefox中却使用了W3C的模型,它是通过传参的方法来传播事件的,也就是说你需要为你的函数提供一个事件响应的接口,在上述函数中, 

eventTag扮演的就是这个角色。 

  var event = eventTag||window.event;

  这段代码可以根据浏览器的不同来得到正确的event,并在程序中使用,如果在IE4+下面使用这段代码,因为eventTag为null可以保证event = window.event,但是如果在Firefox下运行的话则因为手工的给定了eventTag所以var event = eventTag。根据对这一段代码的分析我们也不难看出可以对doEventThing方法进行如下的改造(因为javascript允许我们在定义function的时候不明确指出参数的数量): 

function doEventThing(){     

    var event = arguments[0]||window.event;     

     //other code     

  在Firefox下arguments[0]在特定的场合(没有显式的指定function参数数量的时候)被做为传播事件的参数来使用………… 

  至于var currentKey = event.charCode||event.keyCode;也是不同的浏览器所致,在IE4+下面记录键盘的是keyCode,但是在Firefox下的却是charCode,为此我们需要处理他们的差异。 

  还有一个差异就是事件源的获取:通过语句

  var eventSource = window.event.srcElement||eventTag.target;

  我们也看到了IE与W3C的不同。 

  经过上面的包装,我们基本上可以在IE4+和Firefox下面顺利的使用事件机制了,当然如果为了通用性可以对这种差异进封装来形成自己的Event对象在程序中误差别的使用事件对象,这里就不在介绍了。 

  接下来分析事件的绑定:大概分为如下5种 

  1、绑定到元素,这也是比较常见的一种比如: 

  <input type="button" onclick="doEventThing(event)">    

,这样我们就把doEventThing绑定到了该button对象上,点击此按钮事件就被触发。 

  2、绑定事件到对象:这也是比较常见的一种,特别是在IE4+下面: 

  document.getElementById("divid").onclick = doEventThing;

  3、使用<script for>进行事件的绑定,这只在IE4+下有用(为buttong1绑定事件,逻辑在script块中书写event来指定怎么触发事件): 

<script event="onclick" for="button1">   // script statements here  </script>

   4、使用 IE5/Windows 的 attachEvent() 方法      

   5、使用 W3C DOM 的 addEventListener() 方法

  addEventListener("eventType",listenerReference,captureFlag);

  第三个参数则是一个 Boolean 值,指明该结点是否以DOM中所谓的捕捉模式来侦听事件。对于一个典型的事件侦听器来说,第三个参数应该为false(假)。 

  prototype在绑定事件的时候兼容IE和W3C的时候做的处理如下: 

_observeAndCache: function(element, name, observer, useCapture) {     

   if (!this.observers) this.observers = [];     

   if (element.addEventListener) {//W3C DOM     

     this.observers.push([element, name, observer, useCapture]);     

     element.addEventListener(name, observer, useCapture);     

   } else if (element.attachEvent) {//IE5/Windows     

     this.observers.push([element, name, observer, useCapture]);     

     element.attachEvent(’on’ + name, observer);     

   }     

}

撇开this.observers.pust([element,name,observer,useCapture])不谈,我们对4、5所说的事件绑定就很清楚了。我们知道prototype的此方法的useCapture在IE下没有作用,只对W3C的事件处理机制起作用。

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

MySQL部分从库上面因为大量的临时表tmp_table造成慢查询

背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_

皕杰报表之UUID

​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

2020年前端实用代码段,为你的工作保驾护航

有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )