关于IE和Firefox下event乱谈

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

attachEvent,addEventListener还有个麻烦的区别,attachEvent绑定的函数,没有绑定this引用.

不知道我的理解是否和你说的是一个话题，请看代码如下：

function doIt(){
   alert(this);
}

然后我们在页面中处理如下：
首先做一个按钮：<button id="btn">按钮</button>，然后为该按钮绑定事件onclick如下：

<script language="javascript" type="text/javascript">
document.getElementById("btn4").attachEvent("onclick",doIt);
</script>

：

经过这种处理之后，doIt方法中的this不代表button,但是使用
      document.getElementById("btn4").onclick = doIt时this指向的就是btn代表的button了,
     还有就是
      document.getElementById("btn4").addEventListener('click',doSomething,false)；这样也可以把this绑定进去（FF下面），这种情况不知道该怎么解决…………
不过测试后可以发现：
      如果使用了：attacchEvent，则this代表的对象包含如下属性,应该是window：
onbeforeunload   onafterprint   top   location   parent  
offscreenBuffering   frameElement   onerror   screen   event  
clipboardData   onresize   defaultStatus   onblur   window  
onload   onscroll   screenTop   onfocus   Option  
length   onbeforeprint   frames   self   clientInformation  
external   screenLeft   opener   onunload   document  
closed   history   Image   navigator   status  
onhelp   name

基本是这个意思吧:)
attachEvent只是记录了函数,函数运行时不知道元素时那个.
addEventListener做的好些,运行时,this是指向被绑的对象,如你上面的那个btn.

我感觉这个this还是有很大用处的,运行时可以知道元素,而ie就很麻烦,ID?或者通过闭包吧元素也绑进去,但是,这样就是一个循环引用,有内存泄漏问题.


现在常用的一些脚本库,大多都没有重视这点区别.
我在JSI API里,写了个js.html.EventUtil
里面消除了这种区别.

在javascript中this是一个很辣手的问题所以，我在实际的处理过程中总是会尽量的避免这样使用：
  function(){
     this.style.…………;//这里只是简单的说明哦
  }
而更倾向于使用:
  function(needObj){
     needObj.style.…………;
  }

关于这个事件目前我知道的解决的最好的脚本是这个：http://therealcrisp.xs4all.nl/upload/addEvent2.html

可以参考objot的event handler，解决得很好。ff和ie下使用一致，而且很容易消除ie6的内存泄漏

var x = $dom($id('elementId'));
var data = ...;
$this(x.attach('onclick', onClick), data);

function onClick(event) {
  alert(event.target); // == srcElement
  alert(event.charCode); // == keyCode
  alert(event.stop); // function, == stopPropagation, or == (cancelBubble = true)
  alert(this); // == data，$this传入的参数，如果无$this，则为dom元素
  event.target.des(); // 如果这个dom元素不需要了，清除之，并清除内存泄漏
}

每个dom元素清除泄漏的时间是常量，而且一并清除所有子元素，方便组件化开发

补充：

attachEvent的this问题非常讨厌，因为它导致你不能很好的使用bubble了，因为你不知道当前事件bubble到哪个元素上。如果把该元素硬编码进去，一来，降低了该事件代码的复用性，多占内存，二来，容易造成内存泄漏。

IE的事件模型到IE7仍没有改进，实在是令人很不爽。除了上面这一点外，没有capture阶段也是一个问题。

在event方面，比上面帖子提到问题更麻烦的是，在不同浏览器中，事件的含义本身不一致！！这点上，已知的类库没有一个完全解决的！！

举个例子，focus和blur事件，在w3c标准中应该是不bubble的，但是ff中是bubble的。这点上IE稍好，对许多事件它都有两套甚至更多（如关于focus的有onfocus,onblur,onfocusin,onfoucsout,onactivate,ondeactivate,onbeforeactivate,onbeforedeactivate），一套bubble一套不bubble，满足不同的需要。再如click事件和DOMActivate事件的关系等等。。。

总之要做到跨浏览器的事件处理，首先要制定一个跨浏览器的事件模型和一系列标准，这样developer才能顺顺当当的使用。仅仅把几个不同头脸的函数包装成表面一样，是远远不够的。

objot中this在bubble时也是正确的，没什么问题
至于capture嘛，ie不支持，就不管它了

事件含义这个确实很讨厌，一些事件能包装一下，一些根本就不跨浏览器。这个没什么太好办法，尽量用比较兼容的事件吧....