快捷導(dǎo)航

js中獲取事件對(duì)象的方法小結(jié)

更新時(shí)間：2011年03月13日 23:13:54 作者：

事件對(duì)象的獲取很簡單，很久前我們就知道IE中事件對(duì)象是作為全局對(duì)象( window.event )存在的，F(xiàn)irefox中則是做為句柄( handler )的第一個(gè)參數(shù)傳入內(nèi)的。所以一行代碼就可以搞定

復(fù)制代碼代碼如下:

var evt = window.event || arguments[0];

下面分三種添加事件的方式討論，你也許會(huì)看到以前沒有看到過的獲取方式。
1，第一種添加事件的方式，直接在html的屬性中寫JS代碼

復(fù)制代碼代碼如下:

<div onclick="alert(4);">Div1 Element</div>

大概這是上世紀(jì)90年代的寫法，那時(shí)候直接把js代碼寫在網(wǎng)頁中很普遍，也許那時(shí)候的js并不太重要，只是用來做做驗(yàn)證或一些花哨的效果而已。如何在這種添加事件方式下獲取到事件對(duì)象？IE中很簡單，因?yàn)閑vent是作為全局對(duì)象的，所以直接使用event即可，如下

復(fù)制代碼代碼如下:

<div onclick="alert(window.event.type);">Div1 Element</div>

點(diǎn)擊該Div后，IE中會(huì)彈出'click'字符的信息框。說明事件對(duì)象獲取到了，如果在 Opera/Safari/Chrome 中也測試了，會(huì)發(fā)現(xiàn)效果和IE一樣，說明 Opera/Safari/Chrome 中也支持IE方式( window.event )獲取事件對(duì)象。
Firefox中會(huì)報(bào)錯(cuò)，提示：window.event is undefined，說明Firefox不支持IE方式獲取事件對(duì)象而是以句柄的第一個(gè)參數(shù)傳入的，文章開頭意見提到了。
上面的用 window.event 來獲取事件對(duì)象，其實(shí)window可以省略的，就像使用alert而不是window.alert一樣。如

復(fù)制代碼代碼如下:

<div onclick="alert(event.type);">Div1 Element</div>

在 IE/Opera/Safari/Chrome 中測試，和剛剛不會(huì)有什么區(qū)別。在Firefox中再測，會(huì)有個(gè)驚喜，你會(huì)發(fā)現(xiàn)居然彈出的是"click"信息框，而不是"undefined"。
兩次測試區(qū)別僅僅一個(gè)用window.event.type，一個(gè)用event.type。這個(gè)問題下面詳細(xì)討論。
下面用句柄第一個(gè)參數(shù)來獲取事件對(duì)象，可以把onclick屬性的值想象成一個(gè)匿名函數(shù)，onclick屬性值的字符串實(shí)際上都是這個(gè)匿名函數(shù)內(nèi)的js代碼。
既然這樣，我們就可以通過Function的一個(gè)屬性argumengs獲取到該匿名函數(shù)的第一個(gè)參數(shù)，而該參數(shù)就是事件對(duì)象。如

復(fù)制代碼代碼如下:

<div onclick="alert(arguments[0].type);">Div1 Element</div>

IE中會(huì)報(bào)錯(cuò)，提示：arguments.0.type為空或不是對(duì)象
Firefox/Opera/Safari/Chrome 中會(huì)彈出"click"內(nèi)容的信息框，說明他們都支持事件對(duì)象作為句柄第一個(gè)參數(shù)傳入。從側(cè)面也說明了 Opera/Safari/Chrome 不僅支持W3C標(biāo)準(zhǔn)方式獲取事件對(duì)象，同時(shí)也兼容了IE方式獲取事件對(duì)象。
既然知道onclick對(duì)應(yīng)的是一個(gè)匿名函數(shù)，我們不妨把該匿名函數(shù)打印出來看看，只需以下代碼

復(fù)制代碼代碼如下:

<div onclick="alert(arguments.callee);">Div1 Element</div>

在各瀏覽器中點(diǎn)擊該Div，結(jié)果如下：

IE6/7/8 :

function onclick(){ alert(arguments.callee);}

IE9 :

function onclick(event){ alert(arguments.callee);}

Firefox / Safari :
function onclick(event) { alert(arguments.callee);}

Chrome :
function onclick(evt) { alert(arguments.callee);}

Opera :

function anonymous(event) {alert(arguments.callee);}

觀察這些函數(shù)發(fā)現(xiàn)：
IE6/7/8沒有定義參數(shù)
IE9/Firefox/Safari/Opera 定義了參數(shù)event
Chrome定義了參數(shù)evt。
現(xiàn)在回到上面遺留的問題，如下

復(fù)制代碼代碼如下:

<div onclick="alert(window.event.type);">Div1 Element</div> 
<div onclick="alert(event.type);">Div1 Element</div> 

這兩個(gè)div的區(qū)別僅window.event.type和event.type。分別點(diǎn)擊后，后者在Firefox中不彈出"undefined"，而是"click"，是因?yàn)镕irefox中匿名函數(shù)定義了參數(shù)event，該參數(shù)剛好與IE的全局對(duì)象event同名，從而誤以為Firefox也支持IE方式獲取事件對(duì)象。

同樣的道理，Chrome中定義的參數(shù)是evt，那么在Chrome中還可以通過以下方式獲取事件對(duì)象，如下

復(fù)制代碼代碼如下:

<div onclick="alert(evt);">Div1 Element</div>

2，第二種添加事件的方式，定義一個(gè)函數(shù)，賦值給html元素的onXXX屬性

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
function clk(){} 
</script> 
<div onclick="clk()">Div2 Element</div> 

先定義函數(shù)clk，然后賦值給onclick屬性，這種方式也應(yīng)該屬于上世紀(jì)90年代的流行寫法。比第一種方式好的是它把業(yè)務(wù)邏輯代碼都封裝在一個(gè)函數(shù)里了，使HTML代碼與JS代碼稍微有點(diǎn)兒分離，不至于第一種那么緊密耦合。
如何在這種方式(clk函數(shù)內(nèi))中獲取事件對(duì)象？IE中使用全局對(duì)象event仍然沒問題，如:

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
function clk(){alert(window.event);} 
</script> 
<div onclick="clk()">Div2 Element</div> 

點(diǎn)擊Div后，除Firefox外，IE/Opera/Safari/Chrome都能正常獲取事件對(duì)象。上面已經(jīng)提到了 Opera/Safari/Chrome 兼容IE方式(window.event)獲取事件對(duì)象，而唯獨(dú)Firefox不支持。從而Firefox中只能通過參數(shù)傳入了。試著這么寫

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
function clk(){alert(event);} 
</script> 
<div onclick="clk()">Div2 Element</div> 

因?yàn)樵贔irefox中匿名函數(shù)是具有event參數(shù)的，而clk()是在匿名函數(shù)之內(nèi)的，打印出匿名函數(shù)便知

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
function clk(){alert(arguments.callee.caller);} 
</script> 
<div onclick="clk()">Div2 Element</div> 

點(diǎn)擊該Div，F(xiàn)irefox彈出信息框內(nèi)容如下

復(fù)制代碼代碼如下:

 
function onclick(event) { 
clk(); 
} 

回到clk中的alert(event)，既然匿名函數(shù)的event傳入了，那么在該閉包中clk是可以獲取到event的，事實(shí)上點(diǎn)擊后Firefox會(huì)報(bào)錯(cuò)：event is not defined。猜測該匿名函數(shù)的閉包和function clk(){alert(event);}不是同一個(gè)閉包環(huán)境。這種方式不行，則只能通過顯示的參數(shù)傳入了，如

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
function clk(e){alert(e);} 
</script> 
<div onclick="clk(arguments[0])">Div2 Element</div> 

點(diǎn)擊Div，在Firefox中正確彈出了事件對(duì)象，支持參數(shù)傳入的瀏覽器都可以，如Opera/Safari/Chrome。
把以上代碼中的arguments[0]改成event，那么所有瀏覽器都支持。
把以上代碼中的arguments[0]改成window.event，那么將只有Firefox不支持。
把以上代碼中的arguments[0]改成evt，那么將只有Chrome支持。
思考下為什么？
3，第三種添加事件方式，使用element.onXXX方式

復(fù)制代碼代碼如下:

 
<div id="d3">Div3 Element</div> 
<script type="text/javascript"> 
var d3 = document.getElementById('d3'); 
d3.onclick = function(){ } 
</script> 

這種方式也比較早期，但好處是可以將JS與HTML完全分離，但前提是需要給HTML元素提供一個(gè)額外的id屬性(或其它能獲取該元素對(duì)象的方式)。
這種方式添加事件IE6/7/8只支持window.event不支持參數(shù)傳入，F(xiàn)irefox只支持參數(shù)傳入不支持其它方式。IE9/Opera/Safari/Chrome 兩種方式都支持。
4，第四種添加事件方式，使用addEventListener或IE專有的attachEvent

復(fù)制代碼代碼如下:

 
<div id="d4">Div4 Element</div> 
<script type="text/javascript"> 
var d4 = document.getElementById('d4'); 
function clk(){alert(4)} 
if(d4.addEventListener){ 
d4.addEventListener('click',clk,false); 
} 
if(d4.attachEvent){ 
d4.attachEvent('onclick',clk); 
} 
</script> 

這是目前推薦的方式，較前兩種方式功能更為強(qiáng)大，可以為元素添加多個(gè)句柄(或稱響應(yīng)函數(shù))，支持事件冒泡或捕獲，前三種方式默認(rèn)都是冒泡。當(dāng)然IE6/7/8仍然沒有遵循標(biāo)準(zhǔn)而使用了自己專有的attachEvent，且不支持事件捕獲。IE9 中已經(jīng)支持addEventListener了。
先用window.event測試，如

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
var d4 = document.getElementById('d4'); 
function clk(){alert(window.event)} 
if(d4.addEventListener){ 
d4.addEventListener('click',clk,false); 
} 
if(d4.attachEvent){ 
d4.attachEvent('onclick',clk); 
} 
</script> 

點(diǎn)擊Div[id=d4]，IE/Opera/Safari/Chrome都正確的彈出了事件對(duì)象信息框，F(xiàn)irefox彈出的是"undefined"，預(yù)料之中，因?yàn)镕irefox不支持window.event作為事件對(duì)象。
再換成句柄的第一個(gè)參數(shù)測試，如

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
var d4 = document.getElementById('d4'); 
function clk(e){alert(e)} 
if(d4.addEventListener){ 
d4.addEventListener('click',clk,false); 
} 
if(d4.attachEvent){ 
d4.attachEvent('onclick',clk); 
} 
</script> 

測試之前，猜測一下什么結(jié)果，可能有人會(huì)覺得IE中應(yīng)該彈出undefined，其它瀏覽器都是事件對(duì)象。事實(shí)上所有瀏覽器彈出的信息框顯示都是事件對(duì)象。
總結(jié)下：
1，IE6/7/8支持通過window.event獲取對(duì)象，通過attachEvent方式添加事件時(shí)也支持事件對(duì)象作為句柄第一個(gè)參數(shù)傳入
2，F(xiàn)irefox只支持事件對(duì)象作為句柄第一個(gè)參數(shù)傳入
3，IE9/Opera/Safari/Chrome兩種方式都支持