JavaScript -- DOM事件
什么是事件
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。比如你在网页上见到的鼠标点击一个按钮，按钮的颜色发生了变化，就是因为这个标签绑定了点击事件
鼠标事件
onload：页面加载时触发
onclick：鼠标点击时触发
onmouseover：鼠标滑过时触发
onmouseout：鼠标离开时触发
onfoucs：获得焦点时触发
onblur：失去焦点时触发
onchange：域的内容改变时发生
onsubmit：表单中的确认按钮被点击时发生
onmousedown：鼠标按钮在元素上按下时触发
onmousemove：在鼠标指针移动时发生
onmouseup：在元素上松开鼠标按钮时触发
onresize：当调整浏览器窗口的大小时触发
onscroll：拖动滚动条滚动时触发
键盘事件与keyCode属性
onkeydown ：在用户按下一个键盘按键时发生
onkeypress：在键盘按键被按下并释放一个键时发生
onkeyup：在键盘按键被松开时发生
keyCode：返回onkeypress、onkeydown 或 onkeyup事件触发的键的值的字符代码，或者的键的代码。
HTML事件
语法：<tag 事件=“执行脚本”></tag>
功能：在HTML元素上绑定事件。
说明：执行脚本可以是一个函数的调用。
看一个简单的点击事件
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<input type="button" value="按钮" onclick="alert('我是点击事件')">
</body>
</html>
代码解释：
我们给input绑定了一个onclick事件，在前面说过onclick是点击事件，所以当我们鼠标点击时会触发。
onmouseover事件
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
.btn{height: 30px;width: 60px;background: burlywood;border-radius: 5px;
text-align: center;line-height: 30px;}
</style>
</head>
<body>
<div id="btn" class="btn" onmouseover="mouseoverFn(this,'red')">开始</div>
<script>
function mouseoverFn(btn,col) {
btn.style.backgroundColor=col;
}
</script>
</body>
</html>
代码解释：
this：在事件触发的函数中，this是对该DOM对象的引用，大家可以理解为是这个标签，当鼠标划过的时候，this就代表这个标签。所以
上面代码鼠标划过的时候背景成了红色，但是离开之后还是红色，这样肯定不行，我们可以在给绑定一个onmouseout事件
onmouseout事件
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
.btn{height: 30px;width: 60px;background: burlywood;border-radius: 5px;
text-align: center;line-height: 30px;}
</style>
</head>
<body>
<div id="btn" class="btn" onmouseover="mouseoverFn(this,'red')" onmouseout="mouseoutFn(this,'blue')">开始</div>
<script>
//鼠标经过时，背景变成红色
function mouseoverFn(btn,col) {
btn.style.backgroundColor=col;
}
//鼠标离开时，背景变成蓝色
function mouseoutFn(btn,col) {
btn.style.backgroundColor=col;
}
</script>
</body>
</html>
上面的代码我们把需要发生的事件写在了函数里，这样可以大大的方便我们，以后只要调用这个函数就实现了
DOM0级事件
语法：ele.事件=执行脚本
功能：在DOM对象上绑定事件
说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用。
前面说了HTML事件，但是我们不推荐使用HTML事件，推荐使用DOM0级事件，DOM0级事件是在js中找到这个标签，然后给这个标签绑定一个事件，看个栗子
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> .lock{height: 30px;width: 60px;background: blue;border-radius: 5px; text-align: center;line-height: 30px;} .unlock{height: 30px;width: 60px;background: gray;border-radius: 5px; text-align: center;line-height: 30px;} </style> </head> <body> <div id="d1" class="lock">锁定</div> <script> var btn = document.getElementById('d1'); btn.onclick = function () { this.className="unlock"; this.innerHTML='解锁'; } </script> </body> </html>
如果我们想点击一下为解锁，在点击一下为锁定，怎么办呢？我们可以通过if判断来实现
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> .lock{height: 30px;width: 60px;background: blue;border-radius: 5px; text-align: center;line-height: 30px;} .unlock{height: 30px;width: 60px;background: gray;border-radius: 5px; text-align: center;line-height: 30px;} </style> </head> <body> <div id="d1" class="lock">锁定</div> <script> var btn = document.getElementById('d1'); btn.onclick = function () { //判断按钮如果是锁定，则点击之后为 解锁 if (this.className =='lock'){ this.className="unlock"; this.innerHTML='解锁'; }else{ this.className='lock'; this.innerHTML='锁定' } } </script> </body> </html>
onload事件
onload：页面加载时触发，先来看下面的代码
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <script> var btn = document.getElementById('d1'); var clicked=function () { alert('我被点击了。。。') }; btn.onclick=clicked; </script> </head> <body> <div id="d1" class="lock">我是div</div> </body> </html>
当我们执行的时候会发现报错了：Uncaught TypeError: Cannot set property 'onclick' of null
这是因为代码是从上往下执行的，在执行到var btn = document.getElementById('d1');这里时，还没有这个元素，所以为空，如果我们把js代码放到body标签的最下面就不会报错了，但是我们就想放在header标签里，这时就要用到onload事件了
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <script> //页面加载完执行 window.onload=function () { var btn = document.getElementById('d1'); var clicked=function () { alert('我被点击了。。。') }; btn.onclick=clicked; } </script> </head> <body> <div id="d1" class="lock">我是div</div> </body> </html>
代码解释：
在浏览器执行到window.onload=function ()这里时，就不会执行js里面的代码了，而是等到body标签里的代码执行完成之后再去执行
onfoucs和onblur
onfoucs：获得焦点时触发
onblur：失去焦点时触发
这两个事件只能用于input标签的type为text，password和 textarea标签
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> .left,.tip{ float: left;} .left{padding-left: 30px; margin-top: 50px;} .tip{ margin-top: 50px; display: none; } </style> <script> window.onload=function () { //获取文本框和提示框 var phone = document.getElementById('phone'), tip = document.getElementById('tip'); //给文本框绑定激活的事件 phone.onfocus=function () { tip.style.display='block'; }; //给文本框绑定失去焦点的事件 phone.onblur=function () { //获取文本框的值,value用于获取表单元素的值 var phoneVal = this.value; //判断手机号是否是11位的数字， //如果输入正确，提示正确，错误，提示输入错误 if (phoneVal.length==11 && isNaN(phoneVal)==false){ tip.innerHTML='<div >正确</div>'; tip.style.color='green' }else{ tip.innerHTML='<div >输入错误</div>'; tip.style.color='red' } } } </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
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>
