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')" onmouseout="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>
