JavaScript--DOM事件
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
一、HTML事件
语法：<tag 事件=“执行脚本”></tag>
功能：在HTML元素上绑定事件。
说明：执行脚本可以是一个函数的调用。
<head> <meta charset="UTF-8"> <title>Title</title> <style> .btn{ width: 140px; height: 30px; line-height:30px; background:#00f; color:#fff; font-size: 14px; text-align: center; border-radius: 10px; cursor: pointer; margin-top: 30px; } </style></head><body> <input type="button" value="弹出" onclick="alert('我是按钮')"> <!--鼠标划过按钮时调用mouseoverFn的函数--> <!--this为该dom对象div的引用：该事件绑在div这个元素上，该this就代表div--> <div id="btn" class="btn" onmouseover="mouseoverFn(this)" onmouseout="mouseoutFn(this)">开始</div> <!--或者直接把颜色也传递过去--> <div id="btn2" class="btn" onmouseover="mouseoverFn1(this,'#0f0')" onmouseout="mouseoutFn1(this,'#333')">结束</div> <script> function mouseoverFn(btn) { //鼠标划过按钮时，按钮的背景变为红色 //console.log(btn);//<div id="btn" class="btn" onmouseover="mouseoverFn(this)">开始</div> btn.style.background="#f00"; } function mouseoutFn(btn) { btn.style.background="#00f"; } function mouseoverFn1(btn,bgColor) { btn.style.background=bgColor; } function mouseoutFn1(btn,bgColor) { btn.style.background=bgColor; } </script></body>二、DOM0级事件
语法：ele.事件=执行脚本
功能：在DOM对象上绑定事件
说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用。
<head> <meta charset="UTF-8"> <title>Title</title> <style> .lock{ width: 140px; height: 30px; line-height:30px; background:#00f; color:#fff; font-size: 14px; text-align: center; border-radius: 10px; 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: 10px; cursor: pointer; margin-top: 30px; } </style></head><body> <div id="btn" class="lock" >锁定</div> <script> //获取按钮 var btn=document.getElementById("btn"); //给按钮绑定事件 btn.onclick=function(){ //console.log(this);//<div id="btn" class="lock" >锁定</div> // this.className="unlock"; // this.innerHTML="解锁"; //判断如果按钮时锁定，则显示为解锁，变为灰色 //否则显示为锁定，变为蓝色 /* 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="锁定"; } } //注意：自定义函数时的调用 function clickBtn(){ alert("我是按钮"); } btn.onclick=clickBtn;//此处调用不能写() </script></body>三、常用的鼠标事件与键盘事件
1.鼠标事件
onload：页面加载时触发
onclick：鼠标点击时触发
onmouseover：鼠标滑过时触发
onmouseout：鼠标离开时触发
onfoucs：获得焦点时触发
onblur：失去焦点时触发
onchange：域的内容改变时发生
onsubmit：表单中的确认按钮被点击时发生
onmousedown：鼠标按钮在元素上按下时触发
onmousemove：在鼠标指针移动时发生
onmouseup：在元素上松开鼠标按钮时触发
onresize：当调整浏览器窗口的大小时触发
onscroll：拖动滚动条滚动时触发
①onload：页面加载时触发
<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>②onfoucs:获得焦点时触发 用于input标签type为text、password、textarea
③onblur:失去焦点时触发
<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>④onchange：域的内容改变时发生
<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>⑤onsubmit：表单中的确认按钮被点击时发生
⑥onmousedown：鼠标按钮在元素上按下时触发
⑦onmousemove：在鼠标指针移动时发生
⑧onmouseup：在元素上松开鼠标按钮时触发
⑨onresize：当调整浏览器窗口的大小时触发
⑩onscroll：拖动滚动条滚动时触发
<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>2.键盘事件与keyCode属性
onkeydown ：在用户按下一个键盘按键时发生
onkeypress：在键盘按键被按下并释放一个键时发生
onkeyup：在键盘按键被松开时发生
keyCode：返回onkeypress、onkeydown 或 onkeyup
事件触发的键的值的字符代码，或者的键的代码。
<head> <meta charset="UTF-8"> <title>Title</title> <style> .text span{ font-weight: bold; color: #f00; } em{ font-style: normal; } </style></head><body> <p class="text">您还可以输入 <span> <em id="count">30</em>/30 </span> </p> <div class="input"> <textarea name="" id="text" cols="70" rows="4"></textarea> </div> <script> //获取文本框的值 var text=document.getElementById("text"); //在事件触发的function里，用一个参数接受事件对象 // document.onkeydown=function (ev) { // console.log(ev.keyCode); // } var total=30; //绑定键盘事件 var count=document.getElementById("count"); document.onkeyup=function (ev) { //获取文本框的值的长度 var len=text.value.length; var allow=total-len; count.innerHTML=allow; } </script></body>四、this的指向
在事件触发的函数中，this是对该DOM对象的引用。
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。