六十八：JavaScript之DOM事件之常用的鼠标事件
事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间
1.HTML事件：直接在HTML元素标签内添加事件，执行脚本
2.DOM0级事件：ele.事件 = 执行脚本，在DOM对象上绑定事件，执行脚本可以是一个匿名函数，也可以是一个函数的调用
3.鼠标事件类型：
onload：页面加载时触发
onclick：鼠标点击时触发
onmouseover：鼠标滑过时触发
onmouseout：鼠标离开时触发
onfoucs：获得焦点时触发
onblur：失去焦点时触发
onchange：域的内容改变时发生，一般用于select、checkbox、radio
onsubmit：表单中确认按钮被点击时发生
onmousedown：鼠标按钮在元素上按下时触发
onmousemove：在鼠标指针移动时触发
onmouseup：在元素上松开鼠标按钮时触发
onresize：当调整浏览器窗口大小时触发
onscroll：拖到滚动条时触发
onload：页面加载时触发
onclick：鼠标点击时触发
onmouseover：鼠标滑过时触发
onmouseout：鼠标离开时触发
onfoucs：获得焦点时触发
onblur：失去焦点时触发
<!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.style.display='block'; // 让tip显示出来
}
phone.onblur=function(){ // 给文本框绑定失去焦点的事件
var phoneVal=this.value; // 获取文本框的值,value用于获取表单元素的值
// 判断手机号码是否是11位的数字
// 如果输入正确，则显示对号图标，否则显示错号图标
tip.innerHTML=(phoneVal.length==11 && isNaN(phoneVal)==false)?'<img src="img/right.png">':'<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：域的内容改变时发生，一般用于select、checkbox、radio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 页面加载时执行
window.onload = function () {
menu = document.getElementById('menu'); // 获取下拉菜单
// 给下拉菜单绑定onchange事件
menu.onchange = function () {
// 获取当前选中的值
// var color = menu.options[menu.selectedIndex].value; // 用索引从所有选项中取
var color = this.value; // 用this属性取
document.body.style.background = color == "" ? "#fff" : color; // 背景色，有值就设为该值，否则设为白色
}
}
</script>
</head>
<body>
<div id="box">请选择背景颜色
<select name="" id="menu">
<option value="">请选择</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
</select>
</div>
</body>
</html>
讨论群：249728408
