站長(zhǎng)資訊網(wǎng)
javascript是一種事件驅(qū)動(dòng)的腳本語(yǔ)言。javascript是采用事件驅(qū)動(dòng)的機(jī)制來(lái)響應(yīng)用戶(hù)操作的，也就是說(shuō)當(dāng)用戶(hù)對(duì)某個(gè)html元素進(jìn)行操作的時(shí)候，會(huì)產(chǎn)生一個(gè)事件，該事件會(huì)驅(qū)動(dòng)某些函數(shù)來(lái)處理。
本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)并具有安全性能的腳本語(yǔ)言。
還記得當(dāng)初學(xué)JAVA-GUI編程時(shí)學(xué)習(xí)過(guò)事件監(jiān)聽(tīng)機(jī)制，此時(shí)再學(xué)習(xí)JavaScript中的事件驅(qū)動(dòng)機(jī)制，不免簡(jiǎn)單。當(dāng)初學(xué)習(xí)時(shí)也是畫(huà)過(guò)原理圖，所以從原理圖開(kāi)始吧！
js是采用事件驅(qū)動(dòng)(event-driven)響應(yīng)用戶(hù)操作的。也就是說(shuō)當(dāng)用戶(hù)對(duì)某個(gè)html元素進(jìn)行操作的時(shí)候，會(huì)產(chǎn)生一個(gè)事件，該事件會(huì)驅(qū)動(dòng)某些函數(shù)來(lái)處理。
比如通過(guò)鼠標(biāo)或者按鍵在瀏覽器窗口或者網(wǎng)頁(yè)元素(按鈕，文本框…)上執(zhí)行的操作，我們稱(chēng)之為事件(Event)。由鼠標(biāo)或熱鍵引發(fā)的一連串程序的動(dòng)作，稱(chēng)之為事件驅(qū)動(dòng)(Event-Driver)。對(duì)事件進(jìn)行處理程序或函數(shù)，我們稱(chēng)之為事件處理程序(Event Handler)。
事件的分類(lèi)：
鼠標(biāo)事件：
當(dāng)用戶(hù)在頁(yè)面上用鼠標(biāo)點(diǎn)擊頁(yè)面元素時(shí)，對(duì)應(yīng)的dom節(jié)點(diǎn)會(huì)觸發(fā)鼠標(biāo)事件，主要有click、dblclick、mousedown、mouseout、mouseover、mouseup、mousemove等。
鍵盤(pán)事件：
當(dāng)用戶(hù)用鍵盤(pán)輸入信息時(shí)，會(huì)觸發(fā)鍵盤(pán)操作事件。主要包括keydown、keypress、keyup三個(gè)。
HTML事件：
在html節(jié)點(diǎn)加載變更等相關(guān)的事件，比如window的onload、unload、abort、error，文本框select、change等等。
其它事件：
頁(yè)面中一些特殊對(duì)象運(yùn)行過(guò)程中產(chǎn)生的事件，比如xmlhttprequest對(duì)象的相關(guān)事件。
如下例：
作為第一個(gè)入門(mén)案例，會(huì)遇到一個(gè)問(wèn)題如下：
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠標(biāo)事件</title> <script type="text/javascript"> function test(e) { window.alert("x = "+ e.cientX + " y =" + e.clientY); } </script> </head> <body onmousedown="test(event)"> </body> </html>
以上代碼的作用是，在鼠標(biāo)按下后，彈出窗口顯示x、y的坐標(biāo)。
這段代碼在IE9、Chrome下都不可以正常運(yùn)行。這到底是什么原因呢?
后來(lái)，我就搜索了一下，發(fā)現(xiàn)有人和我有同樣的問(wèn)題，他也解決了，我是參考js的onmousedown事件放在<body>標(biāo)簽下與firefox瀏覽器所產(chǎn)生的問(wèn)題這篇文章的。
原來(lái)是body的原因。
于是，我就給body加了個(gè)寬高試試：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠標(biāo)事件</title> <script type="text/javascript"> function test(e) { window.alert("x = "+ e.cientX + " y =" + e.clientY); } </script> </head> <body onmousedown="test(event)"> </body> </html>
我們不難發(fā)現(xiàn)，當(dāng)我們沒(méi)有給body設(shè)置寬高時(shí)，body的范圍僅僅是一條線(xiàn)，所以onmousedown事件也就無(wú)法響應(yīng)。所以，在給body設(shè)置寬高后，我們就可以在body的寬高范圍響應(yīng)onmousedown事件了。
如何理解事件驅(qū)動(dòng)機(jī)制
為了讓大家進(jìn)一步理解js的事件驅(qū)動(dòng)機(jī)制，我們來(lái)看兩個(gè)案例：
案例：顯示一個(gè)按鈕，點(diǎn)擊按鈕后彈出對(duì)話(huà)框顯示當(dāng)前時(shí)間。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠標(biāo)事件</title> <script type="text/javascript"> function test1() { window.alert(new Date().toLocaleString()); } </script> </head> <body> <input type="button" onclick="test1()" value="顯示當(dāng)前時(shí)間" /> </body> </html>
案例：通過(guò)點(diǎn)擊按鈕改變div的顏色。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠標(biāo)事件</title> <script type="text/javascript"> //js如何訪(fǎng)問(wèn)元素的style屬性，進(jìn)行樣式修改 function test4(eventObj) { //怎么知道button1被按，還是button2被按下 //window.alert(eventObj.value); if(eventObj.value == "黑色") { //獲取div1 var div1 = document.getElementById("div1"); div1.style.background = "black"; } else if(eventObj.value == "紅色") { var div1 = document.getElementById("div1"); div1.style.background = "red"; } } </script> </head> <body> <div id="div1" style="width: 400px; height: 300px; background: red;">div1</div> <input type="button" value="黑色" onclick="test4(this)" /> <input type="button" value="紅色" onclick="test4(this)" /> </body> </html>
javascript訪(fǎng)問(wèn)修改CSS樣式表
javascript訪(fǎng)問(wèn)修改樣式表，可以方便的動(dòng)態(tài)修改頁(yè)面：
1、訪(fǎng)問(wèn)元素中style屬性的CSS樣式
這個(gè)可以直接使用style對(duì)象方便的訪(fǎng)問(wèn)，例如：
<div id="mdiv" style="background-color:blue;">...</div>
訪(fǎng)問(wèn)CSS的方法是：
<script type="text/javascript"> //獲得元素 var oDiv=document.getElementById("mdiv"); //訪(fǎng)問(wèn)元素的style對(duì)象，再訪(fǎng)問(wèn)對(duì)象中的屬性，也可以修改屬性的值，直接為他賦值 alert(oDiv.style.backgroundColor); </script>
2、訪(fǎng)問(wèn)外部定義的CSS樣式(類(lèi)定義的CSS樣式)
這個(gè)沒(méi)法使用上面的方法去訪(fǎng)問(wèn)，因?yàn)镃SS數(shù)據(jù)不是存儲(chǔ)在style屬性中，它是存儲(chǔ)在類(lèi)中的。
訪(fǎng)問(wèn)方法：先取得定義類(lèi)的樣式表的引用，用document.styleSheets集合實(shí)現(xiàn)這個(gè)目的，這個(gè)集合包含HTML頁(yè)面中所有的樣式表，DOM為每個(gè)樣式表定義一個(gè)cssRules的集合，這個(gè)集合中包含定義在樣式表中的所用CSS規(guī)則(注意：Mozilla和Safasi中是cssRules，而IE中是rules)。
例，
外部樣式表(myCss.css)如下：
/*第一條規(guī)則*/ div .ss{ background-color:red; width:101px; } /*第二條規(guī)則*/ a .btn2{ background:url(imag/2-AccessCtl.jpg); }
訪(fǎng)問(wèn)css：
var ocssRules=document.styleSheets[0].cssRules || document.styleSheets[0].rules; //訪(fǎng)問(wèn)第一條規(guī)則 alert(ocssRules[0].style.backgroundColor); //設(shè)置值 ocssRules[0].style.width="992px"; //訪(fǎng)問(wèn)第二條規(guī)則 alert(ocssRules[1].style.background); //設(shè)置值 ocssRules[0].style.background="url(imag/3-back.jpg);";
以上是我用到的時(shí)候一些簡(jiǎn)單的應(yīng)用，具體深入的使用可以參看《javascript高級(jí)程序設(shè)計(jì)》中DOM技術(shù)部分。
如下例：
案例：通過(guò)點(diǎn)擊按鈕改變p的顏色(使用CSS樣式表修改)
外部樣式表(mycss.css)：
.style1 { width: 600px; height: 400px; background: black; }
說(shuō)明：以下代碼在Chrome瀏覽器不起作用，在IE9中無(wú)論使用.rules還是使用.cssRules都通過(guò)測(cè)試。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js事件驅(qū)動(dòng)機(jī)制操作外部CSS案例</title> <link rel="stylesheet" type="text/css" href="mycss.css" /> <link rel="stylesheet" type="text/css" href="mycss2.css" /> <script type="text/javascript"> function test4(eventObj) { //獲取mycss.css中所有class選擇器 var ocssRules = document.styleSheets[0].cssRules;//或xxx.rules //從ocssRules中取出你希望的class //ocssRules[0]:這里的0表示mycss.css文件中的一個(gè)樣式規(guī)則 var style1 = ocssRules[0]; if(eventObj.value == "黑色") { style1.style.background = "black"; } else if(eventObj.value == "紅色") { style1.style.background = "red"; } } </script> </head> <body style="width: 900px; height: 800px; border: 1px solid red;"> <!-- 如何通過(guò)修改style來(lái)改變style --> <div id="div1" class="style1">div1</div> <input type="button" value="黑色" onclick="test4(this)" /> <input type="button" value="紅色" onclick="test4(this)" /> </body> </html>
如何理解事件驅(qū)動(dòng)機(jī)制對(duì)不同瀏覽器的兼容
如何區(qū)分當(dāng)前瀏覽器類(lèi)型?
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //"" null false 0 NaN都是false if(window.XMLHttpRequest){//Mozilla,Safari,IE7,IE8,IE9... if(!window.ActiveXObject){//Mozilla,Safari alert("Mozilla(FF),Safari"); }else{ alert("IE"); } }else{ alert("IE6"); } </script> </head> <body> </body> </html>
一個(gè)事件可以被多個(gè)函數(shù)監(jiān)聽(tīng)
事件寫(xiě)在前面的會(huì)被先調(diào)用。
如下例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠標(biāo)事件</title> <script type="text/javascript"> function test4(e) { window.alert("ok1"); } function test5(e) { window.alert("ok2"); } </script> </head> <body> <input type="button" value="測(cè)試" onclick="test5(this),test4(this)" /> </body> </html>
JavaScript常用事件：
可參考：http://www.w3school.com.cn/jsref/jsref_events.asp及http://www.w3school.com.cn/jsref/dom_obj_event.asp。
下面還是舉幾個(gè)例子吧！
| onfocus | 元素獲得焦點(diǎn)(當(dāng)光標(biāo)處在其中時(shí)觸發(fā)) |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠標(biāo)事件</title> <script type="text/javascript"> function test6() { window.alert("輸入框被選中"); } </script> </head> <body> <input type="text" id="text1" onfocus="test6()" /><br/> </body> </html>
那么如何使得頁(yè)面一加載，文本框即獲得焦點(diǎn)，這是一個(gè)疑問(wèn)?
window有三個(gè)事件
| onload | 一張頁(yè)面或一幅圖像完成加載 |
| onunload | 用戶(hù)退出頁(yè)面 |
| onbeforeunload | 關(guān)閉頁(yè)面時(shí) |
如下例：
說(shuō)明：onload事件在IE9和Chrome瀏覽器測(cè)試通過(guò)，onbeforeunload事件在IE9中測(cè)試通過(guò)，onunload事件均沒(méi)通過(guò)。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠標(biāo)事件</title> <script type="text/javascript"> function test6() { window.alert("輸入框被選中"); } function test7() { window.alert("onload..."); } function test8() { window.alert("onbeforeunload..."); } function test9() { window.alert("onunload..."); } </script> </head> <body onload="test7()" onbeforeunload="test8()" onunload="test9()"> <input type="text" id="text1" onfocus="test6()" /><br/> </body> </html>
js常用事件實(shí)例
請(qǐng)使用js完成如下功能：
1、防止用戶(hù)通過(guò)點(diǎn)擊鼠標(biāo)右鍵菜單copy網(wǎng)頁(yè)內(nèi)容
2、當(dāng)用戶(hù)試圖選中網(wǎng)頁(yè)文字copy時(shí)，給出提示(版權(quán)所有，禁止拷貝)
說(shuō)明：oncontextmenu(IE9、Chrome不支持)，onselectstart(IE9支持，Chrome不支持)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠標(biāo)事件</title> <script type="text/javascript"> function test6() { window.alert("輸入框被選中"); } function test1() { window.alert("版權(quán)所有，禁止拷貝"); return false; } function test2() { window.alert("不要點(diǎn)擊右鍵"); return false; } </script> </head> <body onselectstart="return test1()" oncontextmenu="return test2()"> 請(qǐng)使用js完成如下功能： 1、防止用戶(hù)通過(guò)點(diǎn)擊鼠標(biāo)右鍵菜單copy網(wǎng)頁(yè)內(nèi)容 2、當(dāng)用戶(hù)試圖選中網(wǎng)頁(yè)文字copy時(shí)，給出提示(版權(quán)所有，禁止拷貝)<br/> <input type="text" id="text1" onfocus="test6()" /><br/> </body> </html>
【
