兼容各浏览器的event以及srcElement,fromElement,toElement属性

by aslan

at 2010-07-06 23:23:18

original http://item.feedsky.com/~feedsky/popo4j/~8243992/393778786/6347082/1/item.html

在 IE 中获取事件对象很容易，直接用 event,event.srcElement,event.fromElement,event.toElement 就行了。在 FireFox 中获得触发事件的元素可以用 event.target，但其他两个 fromElement 和 toElement ,属于IE的专属方法,如果要兼容IE的用法就要费些周折了

虽然IE经常我行我素,但无可否认,在这里,srcElement,fromElement,toElement.这三个方法很好用!

所以，为了保持一致的使用方式，也为了保持原有的使用习惯,我们来为非IE浏览器也加上这三个方法,我们通过继承prototype来实现这三个函数

if(window.addEventListener) { 
FixPrototypeForGecko();//标准浏览器就FIX
 }  

  function  FixPrototypeForGecko()  
  {  
      HTMLElement.prototype.__defineGetter__("runtimeStyle",element_prototype_get_runtimeStyle);  
      window.constructor.prototype.__defineGetter__("event",window_prototype_get_event);  
      Event.prototype.__defineGetter__("srcElement",event_prototype_get_srcElement);  
      Event.prototype.__defineGetter__("fromElement",  element_prototype_get_fromElement);  
      Event.prototype.__defineGetter__("toElement", element_prototype_get_toElement);
      
  }  

  function  element_prototype_get_runtimeStyle() { 
return  this.style;
 }  
  function  window_prototype_get_event() { 
return  SearchEvent();
 }  
  function  event_prototype_get_srcElement() {
 return  this.target;
 }  

  function element_prototype_get_fromElement() {  
      var node;  
      if(this.type == "mouseover") node = this.relatedTarget;  
      else if (this.type == "mouseout") node = this.target;  
      if(!node) return;  
      while (node.nodeType != 1) 
          node = node.parentNode;  
      return node;  
  }

  function  element_prototype_get_toElement() {  
          var node;  
          if(this.type == "mouseout")  node = this.relatedTarget;  
          else if (this.type == "mouseover") node = this.target;  
          if(!node) return;  
          while (node.nodeType != 1)  
             node = node.parentNode;  
          return node;  
  }
   
  function  SearchEvent()  
  {  
      if(document.all) return  window.event;  
       
      func = SearchEvent.caller;  

      while(func!=null){  
          var  arg0=func.arguments[0];  
          
          if(arg0 instanceof Event) {  
              return  arg0;  
          }  
         func=func.caller;  
      }  
      return   null;  
  }

好了，现在不管是在 IE 中还是在 FireFox 中，触发事件后都有 event、event.srcElement、event.fromElement、event.toElement 这些属性了

测试代码：

<script>
  function test(){
      alert("event:" + event +", srcElement:"+event.srcElement.innerHTML+
        ", fromElement:"+event.fromElement.innerHTML + ", toElement:"+event.toElement.innerHTML)
  }
</script>

<button onmouseout="test()">MouseOut</button><button onmouseover="test()">MouseOver</button>

OK，一切正常,在firefox和google浏览器中都可以使用event.srcElement、event.fromElement、event.toElement 这些属性了

 src="http://www1.feedsky.com/t1/393778786/popo4j/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/popo4j/~8243992/393778786/6347082/1/item.html" border="0" height="0" width="0"><p><a href="http://www1.feedsky.com/r/l/feedsky/popo4j/393778786/art01.html"><img border="0" ismap src="http://www1.feedsky.com/r/i/feedsky/popo4j/393778786/art01.gif"></a></p><p><a href="http://feed.feedsky.com/~flare/popo4j?a=f1988c8e33f76c6db2c007da166a41cb"><img src="http://feed.feedsky.com/~flare/popo4j?i=f1988c8e33f76c6db2c007da166a41cb" border="0"></a><a href="http://feed.feedsky.com/~flare/popo4j?a=e54c2c8df7aae186c16cdc64169fedd5"><img src="http://feed.feedsky.com/~flare/popo4j?i=e54c2c8df7aae186c16cdc64169fedd5" border="0"></a><a href="http://feed.feedsky.com/~flare/popo4j?a=1b8e1c88aeb8c0deb9921d78fe8ab16b"><img src="http://feed.feedsky.com/~flare/popo4j?i=1b8e1c88aeb8c0deb9921d78fe8ab16b" border="0"></a></p>

Google Reader