JavaScript -- 時光流逝（八）：js中的事件Event的使用
阿新 • • 發佈：2018-11-04
JavaScript -- 知識點回顧篇（八）：js中的事件Event的使用
事件通常與函式配合使用，這樣就可以通過發生的事件來驅動函式執行。
(1) onabort : onabort 事件會在影象載入被中斷時發生。
<!doctype html> <html> <head> <script type="text/javascript"> function abortImage() { alert('Error: Loading of the image was aborted') } </script> </head> <body> <img src="test.jpg" onabort="abortImage()" /> </body> </html>
(2) onblur :元素失去焦點時觸發該事件。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function txtToupper(){ var x=document.getElementById("txt1").value document.getElementById("txt1").value=x.toUpperCase() } </script> </head> <body> 輸入小寫字母： <input type="text" id="txt1" onblur="txtToupper()" /> </body> </html>
(3) onchange :域的內容被改變觸發該事件。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function txtToupper(){ var x=document.getElementById("txt1").value document.getElementById("txt1").value=x.toUpperCase() } </script> </head> <body> 輸入小寫字母： <input type="text" id="txt1" onchange="txtToupper()" /> </body> </html>
(4) onclick :當用戶點選某個物件時觸發該事件。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function txtToupper(){ var x=document.getElementById("txt1").value document.getElementById("txt1").value=x.toUpperCase() } </script> </head> <body> <button onclick="txtToupper()">點我一下</button> <input type="text" id="txt1" /> </body> </html>
(5) ondblclick :當用戶雙擊某個html元素時觸發該事件。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function txtToupper(){ var x=document.getElementById("txt1").value document.getElementById("txt1").value=x.toUpperCase() } </script> </head> <body> <button ondblclick="txtToupper()">點我一下</button> <input type="text" id="txt1" /> </body> </html>
(6) onerror :在載入文件或影象時發生錯誤觸發該事件。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function loadImageError(){ alert('Error: Loading of the image was aborted') } </script> </head> <body> <img src="test.jpg" onabort="loadImageError()" /> </body> </html>
(7) onfocus :元素獲得焦點觸發該事件。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function setStyle(x){ document.getElementById(x).style.background="green"; } </script> </head> <body> <input type="text" id="txt1" onfocus="setStyle(this.id)" /> </body> </html>
(8) onkeydown :某個鍵盤按鍵被按下觸發該事件。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function setStyle(x){ document.getElementById(x).style.background="green"; } </script> </head> <body> <input type="text" id="txt1" onkeydown="setStyle(this.id)" /> </body> </html>
(9) onkeypress :某個鍵盤按鍵被按下並鬆開觸發該事件。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function setStyle(x){ document.getElementById(x).style.background="green"; } </script> </head> <body> <input type="text" id="txt1" onkeypress="setStyle(this.id)" /> </body> </html>
(10) onkeyup :某個鍵盤按鍵被鬆開觸發該事件。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function setStyle(x){ document.getElementById(x).style.background="green"; } </script> </head> <body> <input type="text" id="txt1" onkeyup="setStyle(this.id)" /> </body> </html>
(11) onload :一張頁面或一幅影象完成載入觸發該事件。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function alertLoadingPageInfo(){ alert('頁面載入中'); } </script> </head> <body onload="alertLoadingPageInfo()"> </body> </html>
(12) onmousedown :滑鼠按鈕被按下觸發該事件。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function setStyle(x){ document.getElementById(x).style.background="green"; } </script> </head> <body> <input type="text" id="txt1" onmousedown="setStyle(this.id)" /> </body> </html>
(13) onmousemove :滑鼠被移動觸發該事件。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function setStyle(x){ document.getElementById(x).style.background="green"; } </script> </head> <body> <input type="text" id="txt1" onmousemove="setStyle(this.id)" /> </body> </html>
(14) onmouseout :滑鼠從某元素移開觸發該事件。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function setStyle(x){ document.getElementById(x).style.background="green"; } </script> </head> <body> <input type="text" id="txt1" onmouseout="setStyle(this.id)" /> </body> </html>
(15) onmouseover :滑鼠移到某元素之上觸發該事件。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function setStyle(x){ document.getElementById(x).style.background="green"; } </script> </head> <body> <input type="text" id="txt1" onmouseover="setStyle(this.id)" /> </body> </html>
(16) onmouseup :滑鼠按鍵被鬆開觸發該事件。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function setStyle(x){ document.getElementById(x).style.background="green"; } </script> </head> <body> <input type="text" id="txt1" onmouseup="setStyle(this.id)" /> </body> </html>
(17) onreset :重置按鈕被點選觸發該事件。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function setStyle(){ document.getElementById('txt1').style.background="yellow"; } </script> </head> <body> <form onreset="setStyle()"> <input type="text" id="txt1" /> <input type="reset" value="Reset" /> </form> </body> </html>
(18) onresize :視窗或框架被重新調整大小觸發該事件。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function setStyle(){ document.getElementById('txt1').style.background="yellow"; } </script> </head> <body onresize="setStyle()"> <input type="text" id="txt1" /> </body> </html>
(19) onselect :文字被選中觸發該事件。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function setStyle(){ document.getElementById('txt1').style.background="yellow"; } </script> </head> <body> <input type="text" id="txt1" /><br/> <input type="text" onselect="setStyle()" /> </body> </html>
(20) onunload :使用者退出頁面觸發該事件。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function alertClosePageInfo(){ alert('將會關閉本頁面'); } </script> </head> <body onunload="alertClosePageInfo()"> </body> </html>
