下面討論一下 js 中的 Event 對(duì)象，主要從以下三個(gè)方面詳細(xì)的描述(點(diǎn)擊標(biāo)題可跳轉(zhuǎn)到對(duì)應(yīng)部分)：
2.怎么用event，用他該注意什么，幾個(gè)簡(jiǎn)單實(shí)際應(yīng)用
3.event在不同瀏覽器的存在的兼容問(wèn)題，及如何去解決
1. 什么是event
Event 對(duì)象代表事件的狀態(tài)，比如事件在其中發(fā)生的元素、鍵盤(pán)按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài)等等。說(shuō)的通俗一點(diǎn)就是，event是JS的一個(gè)系統(tǒng)內(nèi)置對(duì)象。平時(shí)無(wú)法使用，當(dāng)DOM元素發(fā)生按鍵、鼠標(biāo)等等各種事件時(shí)，系統(tǒng)會(huì)自動(dòng)根據(jù)DOM元素觸發(fā)的事件生成一個(gè)event對(duì)象。然后你可以直接取、使用這個(gè)新創(chuàng)建的對(duì)象去查詢(xún)一些信息或者完成一些功能(ps：當(dāng)然存在瀏覽器差異，后續(xù)再說(shuō))。
那我們執(zhí)行一段簡(jiǎn)單的代碼，了解一下這個(gè) event 對(duì)象里面都有些啥：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="func()" style="width: 80px; height: 40px;">點(diǎn)我</button>
</body>
<script type="text/javascript">
function func(){
console.log(event);
} </script></html>
然后我們看一下控制臺(tái)的打印結(jié)果：
這是一個(gè)很簡(jiǎn)單的測(cè)試，從控制臺(tái)的結(jié)果不難看出，這里面包含很多信息，這是以對(duì)象屬性的方式呈現(xiàn)的。同樣這些信息也都是 event 的屬性，可以直接通過(guò)鏈?zhǔn)秸Z(yǔ)法點(diǎn)出來(lái)。所以我們?cè)谛枰@些屬性信息時(shí)可以直接打印出來(lái)，然后視情況使用。
關(guān)于 event 的所有屬性，在這就不一一介紹了，W3C 介紹的很清楚，需要了解可以直接 點(diǎn)這里 查看 W3C 的event屬性介紹。
2. 怎么用event，用他該注意什么
要注意只有在事件發(fā)生的過(guò)程中， event對(duì)象才生效。所以我們一般通過(guò)事件綁定函數(shù)，調(diào)用函數(shù)的方式使用、查看 event 的信息。而且在IE中event是一個(gè)全局對(duì)象。就是說(shuō)在你想使用他的時(shí)候可以隨時(shí)調(diào)用。不需要受什么約束。
比如下述代碼:
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="func()" style="width: 80px; height: 40px;">點(diǎn)我</button>
</body>
<script type="text/javascript">
function func(){
console.log(event.target.tagName);
console.log(event.target.textContent);
console.log(event.type);
} </script></html>
然后看一下效果：
這是在IE中的運(yùn)行結(jié)果，很明顯，只要根據(jù)event的屬性往下查詢(xún)，就可以獲取我們想要的信息。而且這里event并沒(méi)有受到作用域的限制。說(shuō)明他是全局的。這里的代碼是在button有點(diǎn)擊事件時(shí)，打印出，被點(diǎn)擊的元素名稱(chēng)，執(zhí)行的事件名稱(chēng)，以及被點(diǎn)擊元素的的text值。所以event的使用特別的靈活。
再舉個(gè)例子，請(qǐng)看以下代碼：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button class="but1" onclick="func()" style="width: 200px; height: 40px;">點(diǎn)我</button>
</body>
<script type="text/javascript">
function func(){ if(event.target.className=="but1"){
event.target.style.backgroundColor="red";
event.target.textContent="我的內(nèi)容被修改了,而且變紅了";
event.target.className="but2";
}else{
event.target.style.backgroundColor="blue";
event.target.textContent="我的內(nèi)容又被修改了,而且變藍(lán)了";
event.target.className="but1";
}
} </script></html>
然后看一下代碼的效果：
我們來(lái)解析一下這段代碼。其實(shí)很簡(jiǎn)單，就是通過(guò) event 的屬性對(duì)觸發(fā)事件的DOM元素進(jìn)行了一系列的操作。這里通過(guò)檢測(cè) button的class名字，對(duì)button的內(nèi)容和背景色進(jìn)行修改，并且修改了button的class名，進(jìn)行多次判斷。這樣就產(chǎn)生了每次點(diǎn)擊使按鈕的背景色和內(nèi)容顯示不同的需求了。
看到這是不是感覺(jué)很神奇。這就是 event 的神奇之處。你可以通過(guò) event 對(duì)象進(jìn)行任何你想要實(shí)現(xiàn)的樣式操作。不需要麻煩的取節(jié)點(diǎn)，不需要寫(xiě)繁瑣的樣式。把你想要的操作全部封裝到一個(gè)函數(shù)中，然后通過(guò)事件調(diào)用。這種操作極其的靈活。
當(dāng)然， event對(duì)象也不是萬(wàn)能的，他也有他的缺陷。因?yàn)樗膱?zhí)行需要在事件發(fā)生之后，所以他也只能做網(wǎng)頁(yè)的修改，沒(méi)有觸發(fā)事件，就無(wú)法實(shí)現(xiàn)操作。而且，瀏覽器兼容問(wèn)題也是比較令人難受的，這個(gè)我們后面再說(shuō)。但是總的來(lái)說(shuō)，這種編程方式在大多數(shù)情況下，能極大的提高代碼編寫(xiě)速度，減少代碼量。至于能否靈活的使用，就得看各位的熟練程度了。
3. event在不同瀏覽器的兼容問(wèn)題，及如何去解決
之前，我們一直沒(méi)說(shuō)的就是 event 的瀏覽器兼容問(wèn)題?，F(xiàn)在我們就著重解決一下。這里就以主流瀏覽器 IE、谷歌、火狐為例介紹一下。
(1) IE 作為那個(gè)年代的瀏覽器老大哥，現(xiàn)在卻是我們最痛恨的瀏覽器，淚奔~~。但是在 event 這一塊，他確實(shí)做的很良心啊。請(qǐng)聽(tīng)我慢慢道來(lái)..... 在IE中，event 是一個(gè)全局的變量，不存在作用域的問(wèn)題。也就是說(shuō)，誰(shuí)觸發(fā)了事件，那在事件綁定的函數(shù)中，你可以直接使用event的屬性做任何操作，沒(méi)有作用域的限制，也沒(méi)有其他函數(shù)格式的要求。所以在IE中放心大膽的去用吧！
(2)Chrome 谷歌 谷歌做的也不錯(cuò)，使用也沒(méi)有什么問(wèn)題。在 Chrome 中，event并不是全局變量。他是在每個(gè)事件綁定的函數(shù)中都默認(rèn)傳入了一個(gè)形參event，注意函數(shù)的第一個(gè)形參就是event對(duì)象，而且我們不需要去寫(xiě)這個(gè)形參。如果你要在事件綁定的函數(shù)中使用 event，那直接 event . 點(diǎn)他的屬性即可。系統(tǒng)默認(rèn)將event對(duì)象以參數(shù)的形式傳遞到了函數(shù)中。這里不需要你做任何操作，只管用，簡(jiǎn)單粗暴。
這里還是再舉個(gè)例子吧，請(qǐng)看下邊代碼：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="func('彈出我來(lái)')"> func </button>
</body>
<script type="text/javascript">
function func(haha){
alert(event.target.tagName); // 返回button名稱(chēng)，因?yàn)閷?duì)象里面有 tagName 這個(gè)鍵 alert(event.target); // 他返回一個(gè)對(duì)象，關(guān)于觸發(fā)這個(gè)時(shí)間的dom節(jié)點(diǎn)信息的對(duì)象 alert(event.type); // 返回click alert(haha);
console.log(event);
} </script></html>
要注意，函數(shù) func() 看起來(lái)只有一個(gè)形參，其實(shí)不然，他還有一個(gè) event 形參，這是系統(tǒng)默認(rèn)的，我們自己的形參該怎么寫(xiě)怎么寫(xiě)，然后在函數(shù)內(nèi)部也是可以直接event 關(guān)鍵字直接使用 event 對(duì)象即可。至于其他的的工作都是瀏覽器默默做了。
這里就是強(qiáng)調(diào)一下 IE 和 Chrome 雖然看起來(lái)用法一樣，其實(shí)還是有本質(zhì)區(qū)別的，只是瀏覽器封裝的好而已。
(3)Firebox 火狐 火狐就麻煩一點(diǎn)了。因?yàn)榛鸷袎焊蜎](méi)有event這個(gè)變量。不過(guò)解決方法也是很簡(jiǎn)單的。想要使用 event，我們就需要先使用如下語(yǔ)句 var e = arguments.callee.caller.arguments[0] || window.event; 很簡(jiǎn)單吧，加上他火狐就可以兼容了，可以和谷歌等一樣使用 event 對(duì)象。但是注意名字變了，我們這里是 e 了。當(dāng)然解決方法還有別的，這個(gè)看個(gè)人喜好，你也可以修改火狐的配置。這里就不一一列舉了，有興趣的可以百度一下。
那 event 就介紹到這了，雖然只是說(shuō)了點(diǎn)皮毛，他說(shuō)的使用太靈活，只能是根據(jù)具體情況具體對(duì)待了。最后，如果本文有錯(cuò)誤之處還請(qǐng)朋友們指出，也歡迎大家在評(píng)論區(qū)或者私信我比較好的 event 對(duì)象應(yīng)用實(shí)例，我們互相學(xué)習(xí)！
http://www.cnblogs.com/pengfei-nie/p/7076489.html
延伸閱讀
- 珊珊老師——北京IT機(jī)構(gòu)十年一線(xiàn)教學(xué)經(jīng)驗(yàn) 2024-08-28
- 告別“老頑固” 2023-04-18
- 時(shí)光飛逝 2024-03-26
- 會(huì)當(dāng)凌絕頂，一覽眾山小 2023-04-18
- 自豪 2023-04-18
- 綻放 2023-04-18
- 畢業(yè)有感 2023-04-18
- 投入六個(gè)月的經(jīng)歷，收獲了整個(gè)人生 2023-04-18
- 非常響亮的名字 2023-04-18
- 不可磨滅的力量 2023-04-18
珊珊老師——北京IT機(jī)構(gòu)十年一線(xiàn)教學(xué)經(jīng)驗(yàn)