IE和Firefox下event乱谈

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

functiondoEventThing(eventTag){
varevent=eventTag||window.event;
varcurrentKey=event.charCode||event.keyCode;
vareventSource=window.event.srcElement||eventTag.target;
}

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

functiondoEventThing(){
varevent=arguments[0]||window.event;
//othercode
}

　　在Firefox下arguments[0]在特定的场合(没有显式的指定function参数数量的时候)被做为传播事件的参数来使用…………
　　至于varcurrentKey=event.charCode||event.keyCode;也是不同的浏览器所致，在IE4+下面记录键盘的是keyCode，但是在Firefox下的却是charCode,为此我们需要处理他们的差异。
　　还有一个差异就是事件源的获取：通过语句
　　vareventSource=window.event.srcElement||eventTag.target;
　　我们也看到了IE与W3C的不同。
　　经过上面的包装，我们基本上可以在IE4+和Firefox下面顺利的使用事件机制了，当然如果为了通用性可以对这种差异进封装来形成自己的Event对象在程序中误差别的使用事件对象，这里就不在介绍了。

　　接下来分析事件的绑定：大概分为如下5种
　　1、绑定到元素，这也是比较常见的一种比如：
　　<inputtype="button"onclick="doEventThing(event)">
,这样我们就把doEventThing绑定到了该button对象上，点击此按钮事件就被触发。
　　2、绑定事件到对象：这也是比较常见的一种，特别是在IE4+下面：
　　document.getElementById("divid").onclick=doEventThing;
　　3、使用<scriptfor>进行事件的绑定，这只在IE4+下有用（为buttong1绑定事件，逻辑在script块中书写event来指定怎么触发事件）：

<scriptevent="onclick"for="button1">
　//scriptstatementshere
</script>

4、使用IE5/Windows的attachEvent()方法
5、使用W3CDOM的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){//W3CDOM
this.observers.push([element,name,observer,useCapture]);
element.addEventListener(name,observer,useCapture);
}elseif(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的事件处理机制起作用。