html滑鼠事件
onload 頁面加載
onclick 滑鼠單擊
onmouseover 滑鼠移入
onmouseout 滑鼠移出
onfocus 獲取焦點
onblur 失去焦點
onchange 域的內容改變
在事件觸發中，this表示對當前dom物件的參考
1、html事件，在html元素上直接系結事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .btn{ width:140px; height:30px; background:#abcdef; line-height:30px; text-align: center; font-size:14px; border-radius:5px; cursor:pointer; } div{ width:140px; height:140px; background:#abcdef; line-height:140px; text-align: center; font-size:14px; margin:50px 0; } </style> </head> <body> <button id="btn" class="btn" onclick="alert('我被點擊啦！');">我是按鈕</button> <div onmouseover="myFun(this,'orange')" onm ouseout="myFun(this,'pink')">我是div</div> <script> function myFun(obj,bgcolor){ obj.style.backgroundColor=bgcolor; } </script> </body> </html>
DOM 0級
通過dom獲取元素，并系結事件
如果事件系結跟的是函式名，千萬不要加括號，否則不需要點擊，頁面一重繪即會觸發函式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .btn{ width:140px; height:140px; background:#abcdef; line-height:140px; text-align: center; font-size:14px; margin:50px 0; } .btn-active{ width:140px; height:140px; line-height:140px; text-align: center; font-size:14px; margin:50px 0; background:pink; } </style> </head> <body> <div id="btn" class="btn">解鎖</div> <script> var btn=document.getElementById("btn"); btn.onclick=myFun;//此處函式后面一定不能加括號，否則不需要點擊會直接呼叫 function myFun(){ if(this.className=="btn"){ this.className="btn-active"; this.innerHTML="鎖定"; }else{ this.className="btn"; this.innerHTML="解鎖"; } } </script> </body> </html>
當把獲取dom元素的腳本，放置在元素的前面，會報錯
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .btn{ width:140px; height:140px; background:#abcdef; line-height:140px; text-align: center; font-size:14px; margin:50px 0; } .btn-active{ width:140px; height:140px; line-height:140px; text-align: center; font-size:14px; margin:50px 0; background:pink; } </style> <script> var btn=document.getElementById("btn"); btn.onclick=myFun;//此處函式后面一定不能加括號，否則不需要點擊會直接呼叫 function myFun(){ if(this.className=="btn"){ this.className="btn-active"; this.innerHTML="鎖定"; }else{ this.className="btn"; this.innerHTML="解鎖"; } } </script> </head> <body> <div id="btn" class="btn">解鎖</div> </body> </html>
把腳本寫在window.onload事件中，確保元素已經生成
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .btn{ width:140px; height:140px; background:#abcdef; line-height:140px; text-align: center; font-size:14px; margin:50px 0; } .btn-active{ width:140px; height:140px; line-height:140px; text-align: center; font-size:14px; margin:50px 0; background:pink; } </style> <script> window.onload=function(){ var btn=document.getElementById("btn"); btn.onclick=myFun;//此處函式后面一定不能加括號，否則不需要點擊會直接呼叫 function myFun(){ if(this.className=="btn"){ this.className="btn-active"; this.innerHTML="鎖定"; }else{ this.className="btn"; this.innerHTML="解鎖"; } } } </script> </head> <body> <div id="btn" class="btn">解鎖</div> </body> </html>
onfocus事件和onblur事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #tip{display: none;} </style> <script> window.onload=function(){ var password=document.getElementById("password"); var tip=document.getElementById("tip"); password.onfocus=function(){ tip.style.display="inline-block"; } password.onblur=function(){ var val=this.value; // 密碼是6位數字 if(val.length==6 && !isNaN(val)){ tip.innerHTML="ok"; }else{ tip.innerHTML="error"; } } } </script> </head> <body> <input type="password" id="password" name="password"> <span id="tip">請輸入密碼</span> </body> </html>
獲取body元素 document.body
當select中的option被選擇時，select的value值就會等于被選中的option的value值
因此可以用this.value得到被選擇的option的value值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script> window.onload=function(){ var menu=document.getElementById("menu"); menu.onchange=function(){ var color=this.value; if(color==""){ document.body.style.backgroundColor="#fff"; }else{ document.body.style.backgroundColor=color; } } } </script> </head> <body> <p>請選擇你喜歡的顏色呀</p> <select name="menu" id="menu"> <option value="">請選擇</option> <option value="orange">元氣橙</option> <option value="pink">仙女粉</option> <option value="#abcdef">森系藍</option> </select> </body> </html>
滑鼠事件
onmousedown 滑鼠按下
onmousemove 滑鼠在元素內移動
onmouseup 滑鼠松開
onresize 瀏覽器視窗大小調整
onscroll 拖動滾動條
onsubmit 表單提交 加在form表單上，而不是加在提交按鈕上
onmousedown+onmouseup=onclick
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } div{ width:200px; height:200px; background:#abcdef; overflow: auto; } #myform{ margin-top:50px; } </style> <script> window.onload=function(){ var div=document.getElementById("div"); div.onmousedown=function(){ this.innerHTML="onmousedown"; } div.onmousemove=function(){ this.innerHTML="onmousemove"; } div.onmouseup=function(){ this.innerHTML="onmouseup"; } window.onresize=function(){ console.log("resized"); } div.onscroll=function(){ this.style.color="orange"; } var myform=document.getElementById("myform"); myform.onsubmit=function(){ alert("表單提交啦~"); } } </script> </head> <body> <div id="div"> 文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br> </div> <form id="myform"> <input type="submit"> </form> </body> </html>
鍵盤事件
onkeydown 鍵盤被按下
onkeypress 鍵盤被按下（只有字母+數字+符號）
onkeyup 鍵盤被釋放
keyCode 鍵碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script> window.onload=function(){ var count=document.getElementById("count"); var text=document.getElementById("text"); text.onkeyup=function(e){ console.log(e.keyCode); var len=text.value.length; count.innerHTML=30-len; } } </script> </head> <body> <p>還可以輸入<span id="count">30</span>/30</p> <textarea name="text" id="text" cols="60" rows="3"></textarea> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/151128.html
標籤：JavaScript