event.srcElement ，event.fromElement，event.toElement

天然，咱們都習慣了 IE，在 IE 中要在函數中得到各事件對象很容易，直接用 event、event.srcElemtn、event.fromElement、event.toElement 就好了。在 FireFox 中得到觸發事件的元素能夠用 event.target，但其餘兩個 fromElement 和 toElement 就要費些周折。

 

一、event.srcElement ： 當前事件的源

   var obj =  event.srcElement ? event.srcElement : event.target; //FF只能識別event.target

 

二、event.fromElement、event.toElement

   

1. <script language="javascript">  
2.     //addEventListener是爲一個事件添加一個監聽，使用方法見http://cindylu520.iteye.com/admin/blogs/588652  
3.     //此處if判斷是不是火狐瀏覽器  
4.   if(window.addEventListener) { FixPrototypeForGecko(); }    
5.   
6.   function  FixPrototypeForGecko()    
7.   {    
8.     //prototype屬性容許你向一個對象添加屬性和方法  
9.     //__defineGetter__和__defineSetter__是Firefox的特有方法，能夠利用來它自定義對象的方法。  
10.     //使用方法見：http://cindylu520.iteye.com/admin/blogs/588667  
11.     //runtimeStyle   運行時的樣式！若是與style的屬性重疊，將覆蓋style的屬性！  
12.       HTMLElement.prototype.__defineGetter__("runtimeStyle",element_prototype_get_runtimeStyle);    
13.       //表明事件狀態，如事件發生的元素，鍵盤狀態，鼠標位置和鼠標按鈕狀態。  
14.       window.constructor.prototype.__defineGetter__("event",window_prototype_get_event);    
15.       //event.srcElement當前事件的源,IE下,event對象有srcElement屬性,可是沒有target屬性;Firefox下,event對象有target屬性,可是沒有srcElement屬性.但他們的做用是至關的  
16.       Event.prototype.__defineGetter__("srcElement",event_prototype_get_srcElement);    
17.       //當前事件有移動成分時，如onmouseover、onmouseout等fromElement、toElement表示移動事件的兩個端點  
18.       Event.prototype.__defineGetter__("fromElement",  element_prototype_get_fromElement);    
19.       Event.prototype.__defineGetter__("toElement", element_prototype_get_toElement);  
20.         
21.   }    
22.   
23.   function  element_prototype_get_runtimeStyle() { return  this.style; }    
24.   function  window_prototype_get_event() { return  SearchEvent(); }    
25.   function  event_prototype_get_srcElement() { return  this.target; }    
26.   
27.   function element_prototype_get_fromElement() {    
28.       var node;    
29.       //relatedTarget 事件屬性返回與事件的目標節點相關的節點。  
30.       //對於 mouseover 事件來講，該屬性是鼠標指針移到目標節點上時所離開的那個節點。  
31.       //對於 mouseout 事件來講，該屬性是離開目標時，鼠標指針進入的節點。  
32.      //對於其餘類型的事件來講，這個屬性沒有用。  
33.      //詳情：http://cindylu520.iteye.com/admin/blogs/588678  
34.             if(this.type == "mouseover") node = this.relatedTarget;    
35.       else if (this.type == "mouseout") node = this.target;    
36.       if(!node) return;    
37.       while (node.nodeType != 1)   
38.           node = node.parentNode;    
39.       return node;    
40.   }  
41.   
42.   function  element_prototype_get_toElement() {    
43.           var node;    
44.           if(this.type == "mouseout")  node = this.relatedTarget;    
45.           else if (this.type == "mouseover") node = this.target;    
46.           if(!node) return;    
47.           while (node.nodeType != 1)    
48.              node = node.parentNode;    
49.           return node;    
50.   }  
51.      
52.   function  SearchEvent()    
53.   {    
54.       if(document.all) return  window.event;    
55.          
56.       func = SearchEvent.caller;    
57.   
58.       while(func!=null){    
59.           var  arg0=func.arguments[0];    
60.             
61.           if(arg0 instanceof Event) {    
62.               return  arg0;    
63.           }    
64.          func=func.caller;    
65.       }    
66.       return   null;    
67.   }  
68. </script>  

  

 

好了，如今無論是在 IE 中仍是在 FireFox 中，觸發事件後都有了 event、event.srcElement、event.fromElement、event.toElement 屬性了。這就來作個測試吧：

Java代碼  

1. <script>  
2.   function test(){  
3.       alert("event:" + event +", srcElement:"+event.srcElement.innerHTML+  
4.         ", fromElement:"+event.fromElement.innerHTML + ", toElement:"+event.toElement.innerHTML)  
5.   }  
6. </script>  
7.   
8. <button onmouseout="test()">MouseOut</button><button onmouseover="test()">MouseOver</button>  

 

頁面中有兩個按鈕 MouseOut 和 MouseOver，你掠過第一個按鈕到第二個按鈕上是，有看到這樣內容的窗口：

從上圖能夠看出，其實我是在 Google 的 Chrome 瀏覽器中做的測試，也是有效的。標題雖然說是兼容 IE 和 FireFox，但寬鬆點說就是 IE  和非 IE，由於 IE 總喜歡劍起偏鋒，不按規範辦事，不過這種事在 IE 8 中是收斂了許多。