1.HTML事件
直接在HTML元素标签内添加事件，执行脚本。
<tag 事件=“执行脚本”></tag>
鼠标事件：
<body>
<div class='aaa bbb ccc'>
<input type='button' value='say hello' onclick="alert('hello')">
<div id='btn' onmouseover="mouseoverFn(this)" onmouseout="mouseoutFn(this)">开始</div>
</div>
<script>
function mouseoverFn(btn){
btn.style.background="red";
}
function mouseoutFn(btn){
btn.style.background="lightblue";
}
</script>
</body>
2.DOM0级事件
语法：ele.事件=执行脚本
功能：在DOM对象上绑定事件
说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用
方法1：匿名函数
<body>
<div class='aaa bbb ccc'>
<div id='btn'>解锁</div>
</div>
<script>
//获取按钮
var btn = document.getElementById("btn");
//给按钮绑定事件
btn.onclick=function(){
if(this.innerHTML=="解锁"){
this.innerHTML="锁定";
this.style.background='red';
}else{
this.innerHTML="解锁";
this.style.background='green';
}
}
</script>
</body>
方法2：普通函数
//给按钮绑定事件
btn.onclick=cilckBtn;
function cilckBtn(){
if(this.innerHTML=="解锁"){
this.innerHTML="锁定";
this.style.background='red';
}else{
this.innerHTML="解锁";
this.style.background='green';
}
}
3.鼠标事件
onfoucs事件和onblur事件
小案例：输入手机号码的文本框，鼠标获得焦点（输入时）文本框左边显示提示文字，输入完成后，检测手机号码是否为11位和纯数字，若是，文本框右边显示“对勾”，否则显示“叉号”。
<body>
<input type='text' id='phone' placeholder='请输入手机号码'>
<div class='tip' id='tip'>
<img src='right.png'>
</div>
<script>
//获取按钮
var phone = document.getElementById("phone");
//给文本框绑定事件
phone.onfocus=showTip;
function showTip(){
var tip = document.getElementById('tip');
tip.innerHTML='请输入11位手机号码';
tip.style.display='block';
}
phone.onblur=showImgTip;
function showImgTip(){
var phoneNumber = this.value;
var tip = document.getElementById('tip');
if(phoneNumber.length==11 && isNaN(phoneNumber)==false){
console.log("ok");
tip.innerHTML="<img src='right.png'>";
}else{
console.log("wrong");
tip.innerHTML="<img src='wrong.png'>";
}
}
</script>
</body>
3.1 onload事件
页面从上往下加载，若将js代码直接写在head里面，将会导致找不到DOM元素。使用window.onload事件即可。
格式：
window.onload=function(){
//JS代码
}
3.2 onchange事件
一般作用在select、单选框或复选框上。
选中的值如何获取：this.value
3.3 其他鼠标事件
4.键盘事件与keyCode属性
document.onkeydown=function(event){
console.log(event.keyCode);
}
event代表事件的状态，如触发event对象的元素、鼠标的位置及状态等。