html mouse event
onload page load
onclick mouse click
onmouseover mouse in
onmouseout mouse out
onfocus get focus
onblur loses focus
Content change of onchang E domain
In event firing, this represents a reference to the current dom object
1. html events, binding events directly on html elements
<!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" onclick="alert('I was clicked!');">I am the button.</button> <div onmouseover="myFun(this,'orange')" onmouseout="myFun(this,'pink')">I am div</div> <script> function myFun(obj,bgcolor){ obj.style.backgroundColor=bgcolor; } </script> </body> </html>
DOM 0 level
Get elements through dom and bind events
If the event binding is followed by the function name, do not add brackets, otherwise you do not need to click, and the function will be triggered as soon as the page is refreshed
<!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">Unlock</div> <script> var btn=document.getElementById("btn"); btn.onclick=myFun;//There must be no parentheses after the function, otherwise it will be called directly without clicking function myFun(){ if(this.className=="btn"){ this.className="btn-active"; this.innerHTML="locking"; }else{ this.className="btn"; this.innerHTML="Unlock"; } } </script> </body> </html>
When the script to get dom element is placed in front of the element, an error will be reported
<!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;//There must be no parentheses after the function, otherwise it will be called directly without clicking function myFun(){ if(this.className=="btn"){ this.className="btn-active"; this.innerHTML="locking"; }else{ this.className="btn"; this.innerHTML="Unlock"; } } </script> </head> <body> <div id="btn">Unlock</div> </body> </html>
Write the script in the window.onload event to ensure that the element has been generated
<!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;//There must be no parentheses after the function, otherwise it will be called directly without clicking function myFun(){ if(this.className=="btn"){ this.className="btn-active"; this.innerHTML="locking"; }else{ this.className="btn"; this.innerHTML="Unlock"; } } } </script> </head> <body> <div id="btn">Unlock</div> </body> </html>
onfocus event and onblur event
<!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; // The password is 6 digits 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">Please input a password</span> </body> </html>
Get the body element document.body
When the option in select is selected, the value of select will be equal to the value of the selected option
Therefore, you can use this.value to get the value of the selected option
<!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>Please choose your favorite color</p> <select name="menu" id="menu"> <option value="">Please choose</option> <option value="orange">Vitality orange</option> <option value="pink">Fairy powder</option> <option value="#abcdef">Moron blue</option> </select> </body> </html>
Mouse events
onmousedown mouse down
onmousemove mouse within element
onmouseup mouse release
On resize browser window
onscroll drag the scroll bar
The onsubmit form submission is added to the form form, not to the submit button
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("Form submitted~"); } } </script> </head> <body> <div id="div"> //Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br> </div> <form id="myform"> <input type="submit"> </form> </body> </html>
Keyboard events
onkeydown key pressed
onkeypress is pressed (only letters + numbers + symbols)
onkeyup keyboard released
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>You can also enter<span id="count">30</span>/30</p> <textarea name="text" id="text" cols="60" rows="3"></textarea> </body> </html>
