如果在使用javascript的时候涉及到event处理，就需要知道event在不同的浏览器中的差异，因为javascript的事件模型有三种，它们分别是NN4、IE4+和W3C/Safari;这也造成了在不同的浏览器中处理event的差异，这里结合一些零碎的代码来说明如何做到event在IE4+和Firefox下的正常工作。
一个事件其实在页面上 有多个元素相应事件处理,点击页面上的一个button,会发生什么?其实 是相当于先后点击了按钮,它的容器,及这个页面.也就是说没一个元素都按照特定的顺序响应那个事件.事件的发生顺序在IE和mozilla在事件支持上的主要差别.
事件流
冒泡技术.冒泡型事件的基本思想,事件按照从特定的事件目标开始到最不确定的事件目标.例如:
<html>
<head>
test
<head>
<body onclick="handle()">
<div onclick="handle1()">click</div>
</body>
</html>
IE5.5顺序是div --body--document.
在IE6中div-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",自己体会一下吧.
如何获取事件对象:
获取事件信息是很重要的事情,事件对象只在事件发生时被创建,而且只有在事件处理函数中可以访问,当所有的事件处理函数结束后,事件对象被销毁.
IE和DOM在获取事件对象上也是有差别的.
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值,和IE的keyCode不一样
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;
}
这段代码主要是为了处理键盘事件的，在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的事件处理机制起作用。
撇开this.observers.pust([element,name,observer,useCapture])不谈，我们对4、5所说的事件绑定就很清楚了。我们知道prototype的此方法的useCapture在IE下没有作用，只对W3C的事件处理机制起作用。
一个事件其实在页面上 有多个元素相应事件处理,点击页面上的一个button,会发生什么?其实 是相当于先后点击了按钮,它的容器,及这个页面.也就是说没一个元素都按照特定的顺序响应那个事件.事件的发生顺序在IE和mozilla在事件支持上的主要差别.
事件流
冒泡技术.冒泡型事件的基本思想,事件按照从特定的事件目标开始到最不确定的事件目标.例如:
<html>
<head>
test
<head>
<body onclick="handle()">
<div onclick="handle1()">click</div>
</body>
</html>
IE5.5顺序是div --body--document.
在IE6中div-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",自己体会一下吧.
如何获取事件对象:
获取事件信息是很重要的事情,事件对象只在事件发生时被创建,而且只有在事件处理函数中可以访问,当所有的事件处理函数结束后,事件对象被销毁.
IE和DOM在获取事件对象上也是有差别的.
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值,和IE的keyCode不一样
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;
}
这段代码主要是为了处理键盘事件的，在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的事件处理机制起作用。
撇开this.observers.pust([element,name,observer,useCapture])不谈，我们对4、5所说的事件绑定就很清楚了。我们知道prototype的此方法的useCapture在IE下没有作用，只对W3C的事件处理机制起作用。