开发者社区> 阿秀a> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

javascript事件处理在IE和FireFox中的区别

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

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


一个事件其实在页面上有多个元素相应事件处理,点击页面上的一个button,会发生什么?其实 是相当于先后点击了按钮,它的容器,及这个页面.也就是说没一个元素都按照特定的顺序响应那个事件.事件的发生顺序在IEmozilla在事件支持上的主要差别.
  事件流
   冒泡技术.冒泡型事件的基本思想,事件按照从特定的事件目标开始到最不确定的事件目标.例如:
    <html>
        <head>
            test
        <head>
        <body onclick="handle()">
             <div onclick="handle1()">click</div>
        </body>
    </html>
  IE5.5顺序是div  --body--document.
IE6div-body--html--document.
mozilla的顺序是div--body--html--html--document--window.

  还有另外一种技术:捕获型事件,它的执行顺序正好和冒泡技术相反,document开始到div结束.
DOM事件流
     同时支持2种事件,但是捕获型事件先发生.2种事件流会触及DOM中的所有对象,document开始,也在document结束.DOM事件流最独特的性质是,文本节点也会触发事件(IE不会),所以如果点击click, dom事件是这样的:
  首先window--document--body--div--click.
  然后click--div--body--document--window.
所以一个事件处理函数在DOM浏览器中会执行2.
给事件指定处理函数  的做法比较简单
var obj = document.getElementById("id");
obj.onclick=function(){}
或者直接在html标签里加onclick="function-name"
这两种方式是在目前所有流行的浏览器种都可以使用.但是如何为每个事件分配多个处理函数呢?
IE的做法:
   IE  ,每个元素和window对象都有2个方法:attachEvent()detachEvent(); attachEvent用来给一个事件附加事件处理函数. detachEvent用来将事件处理函数分离.每个方法都有2个参数:要分配的事件处理函数的名字(例如:onclick)和一个函数引用.
例如:
var fnClick=function(){alert("ss")}
var fnClick1=function(){alert("sss")}
var obj=document.getElementById("id")
obj.attachEvent("onclick",fnClick);
obj.attachEvent("onclick",fnClick1);
obj.detachEvent("onclick",fnClick);
事件的执行顺序是按照添加的顺序执行的.
DOM方法
     dom中对应的方法是addEventListener()removeEventListener ,这两个方法有3个参数,事件名称,要分配的函数和处理函数是用于冒泡阶段还是捕获阶段.如果事件处理函数是用在捕获阶段,第三个参数为true,冒泡阶段为false.用法和IE中的用法一样,不再多说了,就举一个例子吧:
var fnClick=function(){alert("ss")}
var fnClick1=function(){alert("sss")}
var obj=document.getElementById("id")
obj.addEventListener("click",fnClick,false);
obj.addEventListener("click",fnClick1,false);
obj.removeEventListener("click",fnClick,false);
注意这里的是事件名称"click",不是要分配的事件处理函数的名字"onclick",自己体会一下吧.


如何获取事件对象:
    获取事件信息是很重要的事情,事件对象只在事件发生时被创建,而且只有在事件处理函数中可以访问,当所有的事件处理函数结束后,事件对象被销毁.
IEDOM在获取事件对象上也是有差别的.
IE,事件对象时window的一个属性event,也就是说必须在事件处理函数中这样访问:
obj.onclick=function(){obj 1= window.event;}
尽管它是window的属性,event对象也是只能在事件发生时访问.
DOM的准则说明,event对象必须座位唯一的参数传递给事件处理函数,所以在DOM浏览器中访问对象有两种方法:
1.obj.onclick=function(){obj1=arguments[0]}
2.obj.onclick=function(envent){}
事件的属性:介绍几个比较常用的
IE:
altKey                 boolean                                          true 按下alt
button                 integer                                            0=未按键,
                                                                                1=按下左键,
                                                                                2=右健,
                                                                                3=同时按左右,
                                                                                4=按下中键,
                                                                                5=左键+中键,
                                                                                6=右键+中键,
                                                                                7=三个健子一起按下
cancelBuble          boolean                                            设置成true 会停止事件向上冒泡.
fromElement         element                                         鼠标事件中,鼠标所离开的元素.
srcElement                                                                引起事件的元素
toElement                                                                  鼠标事件中,鼠标所进入的元素
type                      string                                           事件的名称.
DOM:
bubbles                boolean                                         表示事件是否是否在冒泡阶段中
cancelable            ''                                                    表示事件能否取消.
charCode                                                                   按下健的unicode,IEkeyCode不一样
currentTarget                                                             事件目前所指向的元素
detail                    integer                                            鼠标点按钮被点击的次数
eventPhase           integer                                            1=捕获阶段,2=在目标上,3=冒泡阶段
isChar                  Boolean                                          表示按键是否时字符
preventDefault       Function                                       调用这个方法可以终止事件的默认行为
relatedTaget                                                               事件的第二个目标,经常用户鼠标事件.
stopPropagation                                                      调用这个方法,组织事件将来事件的冒泡.


首先看如下代码:
function doEventThing(eventTag){    
   var event = eventTag||window.event;    
   var currentKey = event.charCode||event.keyCode;    
   var eventSource =window.event.srcElement||eventTag.target;    
}  
       这段代码主要是为了处理键盘事件的,在IEevent作为window对象的一个属性可以直接使用,但是在Firefox中却使用了W3C的模型,它是通过传参的方法来传播事件的,也就是说你需要为你的函数提供一个事件响应的接口,在上述函数中,
eventTag扮演的就是这个角色。
             var event = eventTag||window.event;
             这段代码可以根据浏览器的不同来得到正确的event,并在程序中使用,如果在IE4+下面使用这段代码,因为eventTagnull可以保证event = window.event,但是如果在Firefox下运行的话则因为手工的给定了eventTag所以var event = eventTag。根据对这一段代码的分析我们也不难看出可以对doEventThing方法进行如下的改造(因为javascript允许我们在定义function的时候不明确指出参数的数量):


function doEventThing(){    
    var event = arguments[0]||window.event;    
     //other code    
}  
Firefoxarguments[0]在特定的场合(没有显式的指定function参数数量的时候)被做为传播事件的参数来使用…………
      至于var currentKey = event.charCode||event.keyCode;也是不同的浏览器所致,在IE4+下面记录键盘的是keyCode,但是在Firefox下的却是charCode,为此我们需要处理他们的差异。
     还有一个差异就是事件源的获取:通过语句var eventSource = window.event.srcElement||eventTag.target;我们也看到了IEW3C的不同。
     经过上面的包装,我们基本上可以在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在绑定事件的时候兼容IEW3C的时候做的处理如下:


_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])不谈,我们对45所说的事件绑定就很清楚了。我们知道prototype的此方法的useCaptureIE下没有作用,只对W3C的事件处理机制起作用。

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JS实现剪切板操作
JS实现剪切板操作
81 0
#yyds干货盘点# 【js学习笔记四十五】实现两栏布局的第一种方式
#yyds干货盘点# 【js学习笔记四十五】实现两栏布局的第一种方式
17 0
#yyds干货盘点# 【js学习笔记四十六】实现两栏布局的第二种方式
#yyds干货盘点# 【js学习笔记四十六】实现两栏布局的第二种方式
12 0
#yyds干货盘点# 【js学习笔记四十七】实现两栏布局的第三种方式
#yyds干货盘点# 【js学习笔记四十七】实现两栏布局的第三种方式
15 0
#yyds干货盘点# 【js学习笔记四十八】实现两栏布局的第四种方式
#yyds干货盘点# 【js学习笔记四十八】实现两栏布局的第四种方式
11 0
#yyds干货盘点# 【js学习笔记四十九】实现两栏布局的第五种方式
#yyds干货盘点# 【js学习笔记四十九】实现两栏布局的第五种方式
12 0
js 实现倒计时功能,兼容ios,类似京东
js 实现倒计时功能,兼容ios,类似京东
21 0
向页面注入js实现为图片和文字元素添加透明蒙层| 8月更文挑战
向页面注入js实现为图片和文字元素添加透明蒙层| 8月更文挑战
138 0
js实现模糊查询
js实现模糊查询的几种方法
87 0
+关注
阿秀a
专注于大型分布式系统的架构和实践,精通阿里云相关产品使用,专注阿里云VPC,专有云,分布式服务互通等技术的研究
114
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载