DOM事件
JavaScript 使我們有能力創(chuàng)建動(dòng)態(tài)頁面。事件是可以被 JavaScript 偵測到的行為。 網(wǎng)頁中的每個(gè)元素都可以產(chǎn)生某些可以觸發(fā)JavaScript函數(shù)的事件。比方說，我們可以在用戶點(diǎn)擊某按鈕時(shí)產(chǎn)生一個(gè)onClick 事件來觸發(fā)某個(gè)函數(shù)。
1．事件
1) 事件是文檔或者瀏覽器窗口中發(fā)生的，特定的交互瞬間。
2) 事件是用戶或瀏覽器自身執(zhí)行的某種動(dòng)作，如click,load和mouseover都是事件的名字。
3) 事件是javaScript和DOM之間交互的橋梁。
你若觸發(fā)，我便執(zhí)行——事件發(fā)生，調(diào)用它的處理函數(shù)執(zhí)行相應(yīng)的JavaScript代碼給出響應(yīng)。典型的例子有：頁面加載完畢觸發(fā)load事件；用戶單擊元素，觸發(fā)click事件。
2．事件流
事件發(fā)生時(shí)會(huì)在元素節(jié)點(diǎn)與根節(jié)點(diǎn)之間按照特定的順序傳播，路徑所經(jīng)過的所有節(jié)點(diǎn)都會(huì)收到該事件，這個(gè)傳播過程即DOM事件流。
事件傳播的順序對應(yīng)瀏覽器的兩種事件流模型：捕獲型事件流和冒泡型事件流(如圖6-9兩種事件流)。
冒泡型事件流：事件的傳播是從最特定的事件目標(biāo)到最不特定的事件目標(biāo)。即從DOM樹的葉子到根。
捕獲型事件流：事件的傳播是從最不特定的事件目標(biāo)到最特定的事件目標(biāo)。即從DOM樹的根到葉子。
事件捕獲的思想就是不太具體的節(jié)點(diǎn)應(yīng)該更早接收到事件，而最具體的節(jié)點(diǎn)最后接收到事件。
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="myDiv">Click me!</div> </body> </html> |
上面這段html代碼中，單擊了頁面中的<div>元素，
在冒泡型事件流中click事件傳播順序?yàn)?lt;div>—》<body>—》<html>—》document
在捕獲型事件流中click事件傳播順序?yàn)閐ocument—》<html>—》<body>—》<div>
圖5-11兩種事件流
3．事件句柄
HTML 事件觸發(fā)瀏覽器中的行為，比如當(dāng)用戶點(diǎn)擊某個(gè) HTML 元素時(shí)啟動(dòng)一段 JavaScript。下面是一個(gè)屬性列表，可將之插入 HTML 標(biāo)簽以定義事件的行為。
| 屬性 | 此事件發(fā)生在何時(shí)... |
| onabort | 圖像的加載被中斷。 |
| onblur | 元素失去焦點(diǎn)。 |
| onchange | 域的內(nèi)容被改變。 |
| onclick | 當(dāng)用戶點(diǎn)擊某個(gè)對象時(shí)調(diào)用的事件句柄。 |
| ondblclick | 當(dāng)用戶雙擊某個(gè)對象時(shí)調(diào)用的事件句柄。 |
| onerror | 在加載文檔或圖像時(shí)發(fā)生錯(cuò)誤。 |
| onfocus | 元素獲得焦點(diǎn)。 |
| onkeydown | 某個(gè)鍵盤按鍵被按下。 |
| onkeypress | 某個(gè)鍵盤按鍵被按下并松開。 |
| onkeyup | 某個(gè)鍵盤按鍵被松開。 |
| onload | 一張頁面或一幅圖像完成加載。 |
| onmousedown | 鼠標(biāo)按鈕被按下。 |
| onmousemove | 鼠標(biāo)被移動(dòng)。 |
| onmouseout | 鼠標(biāo)從某元素移開。 |
| onmouseover | 鼠標(biāo)移到某元素之上。 |
| onmouseup | 鼠標(biāo)按鍵被松開。 |
| onreset | 重置按鈕被點(diǎn)擊。 |
| onresize | 窗口或框架被重新調(diào)整大小。 |
| onselect | 文本被選中。 |
| onsubmit | 確認(rèn)按鈕被點(diǎn)擊。 |
| onunload | 用戶退出頁面。 |
onload 和 onunload 事件會(huì)在用戶進(jìn)入或離開頁面時(shí)被觸發(fā)。onload 事件可用于檢測訪問者的瀏覽器類型和瀏覽器版本，并基于這些信息來加載網(wǎng)頁的正確版本。onload 和 onunload 事件可用于處理 cookie。
| <!DOCTYPE html> <html> <body onload="checkCookies()"> <script> function checkCookies(){ if (navigator.cookieEnabled==true){ alert("已啟用 cookie") } else{ alert("未啟用 cookie") } } </script> <p>提示框會(huì)告訴你，瀏覽器是否已啟用 cookie。</p> </body> </html> |
onchange事件常結(jié)合對輸入字段的驗(yàn)證來使用。下面是一個(gè)如何使用onchange 的例子。當(dāng)用戶改變輸入字段的內(nèi)容時(shí)，會(huì)調(diào)用 upperCase() 函數(shù)。
| <!DOCTYPE html> <html> <head> <script> function myFunction(){ var x=document.getElementById("fname"); x.value=x.value.toUpperCase(); } </script> </head> <body> 請輸入英文字符：<input type="text" id="fname" onchange="myFunction()"> <p>當(dāng)您離開輸入字段時(shí)，會(huì)觸發(fā)將輸入文本轉(zhuǎn)換為大寫的函數(shù)。</p> </body> </html> |
onmouseover 和 onmouseout 事件可用于在用戶的鼠標(biāo)移至 HTML 元素上方或移出元素時(shí)觸發(fā)函數(shù)。
| <!DOCTYPE html> <html> <body> <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background:green;width:120px;height:20px;padding:40px;color:#ffffff;"> 把鼠標(biāo)移到上面 </div> <script> function mOver(obj){ obj.innerHTML="謝謝" } function mOut(obj){ obj.innerHTML="把鼠標(biāo)移到上面" } </script> </body> </html> |