當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS标签的各种事件的举例
生活随笔
收集整理的這篇文章主要介紹了
JS标签的各种事件的举例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.鼠標單擊事件( onclick ）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>單擊事件 </title> 6 <script type="text/javascript"> 7 function openwin(){ 8 window.open('http://www.cnblogs.com/lonecloud/','_blank','height=600,width=400,top=100,toolbar=no,left=0,menubar=no,scrollbars=no,status=no');} 9 </script> 10 </head> 11 <body> 12 <form> 13 <input name="點擊我" type="button" value="點擊我" onClick="openwin()"/> 14 </form> 15 </body> 16 </html>2.鼠標經過事件（onmouseover）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title> 鼠標經過事件 </title> 6 <script type="text/javascript"> 7 function message(){ 8 confirm("請輸入密碼后，再單擊確定!"); } 9 </script> 10 </head> 11 <body> 12 <form> 13 密碼:<input name="password" type="password" > 14 <input name="確定" type="button" value="確定"onmouseover="message()"/> 15 </form> 16 </body> 17 </html>3.鼠標移開事件（onmouseout）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>鼠標移開事件 </title> 6 <script type="text/javascript"> 7 function message(){ 8 alert("不要移開，點擊后進入我的博客!"); } 9 </script> 10 </head> 11 <body> 12 <form> 13 <a href="http://www.imooc.com" onmouseout="message()">點擊我</a> 14 </form> 15 </body> 16 </html>4.光標聚焦事件（onfocus）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title> 光標聚焦事件 </title> 6 <script type="text/javascript"> 7 function message(){ 8 alert("請選擇，您現在的職業！"); 9 } 10 </script> 11 </head> 12 <body> 13 請選擇您的職業：<br> 14 <form> 15 <select name="career" onfocus="message()"> 16 <option>學生</option> 17 <option>教師</option> 18 <option>工程師</option> 19 <option>演員</option> 20 <option>會計</option> 21 </select> 22 </form> 23 </body> 24 </html>5.失焦事件（onblur）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title> 失焦事件 </title> 6 <script type="text/javascript"> 7 function message(){ 8 alert("請確定已輸入密碼后，在移開!"); } 9 </script> 10 </head> 11 <body> 12 <form> 13 用戶:<input name="username" type="text" value="請輸入用戶名！" onblur="message()" > 14 密碼:<input name="password" type="text" value="請輸入密碼！" > 15 </form> 16 </body> 17 </html>6.內容選中事件（onselect）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title> 內容選中事件 </title> 6 <script type="text/javascript"> 7 function message(){ 8 alert("您觸發了選中事件！"); } 9 </script> 10 </head> 11 <body> 12 <form> 13 個人簡介：<br> 14 <textarea name="summary" cols="60" rows="5" onselect="message()">請寫入個人簡介，不少于200字！</textarea> 15 </form> 16 </body> 17 </html>7.文本框內容改變事件（onchange）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title> 文本框內容改變事件 </title> 6 <script type="text/javascript"> 7 function message(){ 8 alert("您改變了文本內容！"); } 9 </script> 10 </head> 11 <body> 12 <form> 13 個人簡介：<br> 14 <textarea name="summary" cols="60" rows="5"onChange="message()">請寫入個人簡介，不少于200字！</textarea> 15 </form> 16 </body> 17 </html>8.加載事件（onload）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title> 加載事件 </title> 6 <script type="text/javascript"> 7 function message(){ 8 alert("加載中，請稍等…"); } 9 </script> 10 </head> 11 <body onload="message()"> 12 歡迎學習JavaScript。 13 </body> 14 </html>9.卸載事件（onunload）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title> 卸載事件 </title> 6 <script type="text/javascript"> 7 window.onunload = onunload_message; 8 function onunload_message(){ 9 alert("您確定離開該網頁嗎？"); 10 } 11 </script> 12 </head> 13 <body onunload="onunload_message()"> 14 歡迎學習JavaScript。 15 </body> 16 </html>?
轉載于:https://www.cnblogs.com/lonecloud/p/5398406.html
總結
以上是生活随笔為你收集整理的JS标签的各种事件的举例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： etcd+calico集群的部署
- 下一篇： Swift学习--常量.变量.数据类型的