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對象的元素、鼠標的位置及狀態等。