JS DOM事件学习
DOM查找方法：
document.getElementByID("id")
document.getElementsByTagName("tag") 返回一个对所有tag标签引用的集合
给元素设置样式：
ele.style.styleName=styleValue 设置ele元素的css样式。属性是减号连接的复合形式时必须要转换为驼峰形式。如font-size变为fontSize。使用tagname需要用循环for设置。
innerHTML：
返回ele元素开始和结束标签之间的HTML内容
ele.innerHTML=‘html’
className:
ele.className ="cls" 添加或获取类，替换元素本身的类。
获取和设置属性：
获取标签属性语法：
DOM对象.属性，如p.id。除class属性和自定义属性用getAttribute。
p.getAttribute("class")
设置属性：
ele.setAttribute（“attribute”，value）
删除属性：
ele.removeAttribute（“attribute”）
1.键盘事件
onkeydown，onkeyup，onkeypress
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .text span{font-weight:bold;color:#f00;} em{font-style:normal;} b{font-weight:normal;} </style> </head> <body> <div> <p class="text"> <b id="showcount">您还可以输入</b> <span id="totalbox"><em id="count">30</em>/30</span> </p> <div class="input"> <textarea name="" id="text" cols="70" rows="4"></textarea> </div> </div> <script> // 获取文本框及其他元素 var text=document.getElementById("text"); var total=30; var count=document.getElementById("count"); var showcount=document.getElementById("showcount"); var totalbox=document.getElementById("totalbox"); // 绑定键盘事件 document.onkeyup=function(){ // 获取文本框值的长度 var len=text.value.length; // 计算可输入的剩余字符 var allow=total-len; var overflow=len-total; // 如果allow小于0 if(allow<0){ showcount.innerHTML="您已超出"+overflow; totalbox.innerHTML=''; }else{ showcount.innerHTML='您还可以输入'; totalbox.innerHTML='<em id="count">'+allow+'</em>/30'; } } </script> </body> </html>
2.鼠标事件
onmouseover事件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .btn{width:140px;height:30px;line-height: 30px;background:#00f; color:#fff;font-size:14px;text-align:center;border-radius:5px; cursor:pointer;margin-top:30px;} </style> </head> <body> <input type="button" value="弹 出" onclick="alert('我是按钮')"> <!--鼠标划过按钮时调用mouseoverFn的函数--> <div class="btn" onmouseover="mouseoverFn(this,'#f00')" onmouseout="mouseoutFn(this,'#ff0')">开始</div> <div class="btn" onmouseover="mouseoverFn(this,'#0f0')" onmouseout="mouseoutFn(this,'#333')">结束</div> <script> function mouseoverFn(btn,bgColor){ // 鼠标划过按钮时，按钮的背景变为红色 btn.style.background=bgColor; } function mouseoutFn(btn,bgColor){ btn.style.background=bgColor; } </script> </body> </html>
onclick事件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .lock{width:140px;height:30px;line-height: 30px;background:#00f; color:#fff;font-size:14px;text-align:center;border-radius:5px; cursor:pointer;margin-top:30px;} .unlock{width:140px;height:30px;line-height: 30px;background:#666; color:#ccc;font-size:14px;text-align:center;border-radius:5px; cursor:pointer;margin-top:30px;} </style> </head> <body> <div class="lock" id="btn">锁定</div> <script> // 获取按钮 var btn=document.getElementById("btn"); function clickBtn(){ alert("我是按钮"); } // 点击按钮调用clickBtn这个函数 btn.onclick=clickBtn; // 给按钮绑定事件,this是对该DOM元素的引用 /*btn.onclick=function(){ // 判断如果按钮是锁定，则显示为解锁，变为灰色，否则显示为锁定，变为蓝色 if(this.className=="lock"){ this.className="unlock"; this.innerHTML="解锁"; }else{ this.className="lock"; this.innerHTML="锁定"; } if(this.innerHTML=="锁定"){ this.className="unlock"; this.innerHTML="解锁"; }else{ this.className="lock"; this.innerHTML="锁定"; } }*/ </script> </body> </html>
onload事件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> // 页面加载时执行，unload页面卸载 window.onload=function(){ // 获取box var box=document.getElementById("box"); var clicked=function(){ alert('我被点击了'); } box.onclick=clicked; } </script> </head> <body> <div id="box">这是一个DIV</div> </body> </html>
onblur，onfocus事件（判断手机号码是否符合规定）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ padding:50px; } .left,.tip{ float:left; } .left{margin-right:10px;} .tip{display:none;font-size:14px;} </style> <script> window.onload=function(){ // 获取文本框和提示框 var phone=document.getElementById("phone"), tip=document.getElementById("tip"); // 给文本框绑定激活的事件 phone.onfocus=function(){ // 让tip显示出来 tip.style.display='block'; } // 给文本框绑定失去焦点的事件 phone.onblur=function(){ // 获取文本框的值,value用于获取表单元素的值 var phoneVal=this.value; // 判断手机号码是否是11位的数字 // 如果输入正确，则显示对号图标，否则显示错号图标 if(phoneVal.length==11 && isNaN(phoneVal)==false){ tip.innerHTML='<img src="img/right.png">'; }else{ tip.innerHTML='<img src="img/error.png">'; } } } </script> </head> <body> <div class="box"> <div class="left"> <input type="text" id="phone" placeholder="请输入手机号码"> </div> <div class="tip" id="tip"> 请输入有效的手机号码 </div> </div> </body> </html>
onchange事件（更改背景颜色）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> // 页面加载 window.onload=init; // 初始化 function init(){ // 获取下拉菜单 var menu=document.getElementById("menu"); // 给菜单绑定change事件,一般作用域select或checkbox或radio menu.onchange=function(){ // 获取当前选中的值 //var bgcolor=this.value; var bgcolor=menu.options[menu.selectedIndex].value; // 如果bgcolor为空，则下面的脚本将不执行 // if(bgcolor=="")return; // 设置body的背景色 // 如果bgcolor为空，则将背景色设为白色，否则是选择的颜色 if(bgcolor==""){ document.body.style.background="#fff"; }else{ document.body.style.background=bgcolor; } } } </script> </head> <body> <div class="box"> 请选择您喜欢的背景色： <select name="" id="menu"> <option value="">请选择</option> <option value="#f00">红色</option> <option value="#0f0">绿色</option> <option value="#00f">蓝色</option> <option value="#ff0">黄色</option> <option value="#ccc">灰色</option> </select> </div> </body> </html>
onmousedown，onmousemove，onmouseup，onclick，onresize，onscroll事件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{height:2000px;} .box{width:200px;height:200px;background:#f00;overflow:auto;} </style> </head> <body> <div class="box" id="box"> <p>拖动</p> <p>拖动</p> <p>拖动</p> <p>拖动</p> <p>拖动</p> <p>拖动</p> <p>拖动</p> <p>拖动</p> <p>拖动</p> <p>拖动</p> </div> <script> var box=document.getElementById("box"); // 绑定按下的事件 box.onmousedown=function(){ console.log("我被按下了"); } // 绑定移动的事件 box.onmousemove=function(){ console.log("我被移动了"); } // 绑定松开的事件 box.onmouseup=function(){ console.log("我被松开了"); } // 绑定点击的事件 box.onclick=function(){ console.log("我被点击了"); } // 浏览器窗口尺寸发生改变时 window.onresize=function(){ console.log("我的尺寸被改变了"); } // 拖动滚动条 window.onscroll=function(){ console.log("我被拖动了"); } box.onscroll=function(){ console.log("我是DIV的滚动条"); } </script> </body> </html>
