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