事件
1. 事件的概念
事件源
事件名
事件註冊
事件處理
以火災爲例：
粵商大酒店201房間着火了，119電話報警，南湖區消防支隊出警，趕赴現場通過噴水作業成功滅火。
事件源：粵商大酒店201房間
事件名：火災
事件註冊：事先已經規劃好片區，粵商大酒店所屬片區歸南湖區消防支隊負責
事件處理：噴水、滅火
2. 常用事件
鼠標的常用事件：
（1） 單擊事件
<p
id="p1" οnclick="fun()">單擊事件</p>
</body>
<script>
function fun(){
var p1
= document.getElementById("p1");
p1.innerText
= "我被單擊了！";
p1.style.fontSize
="60px"
}
</script>
在這個案例中，事件源就是id 爲 p1 的元素，事件名是單擊，時間註冊是οnclick="fun，也就是說當點擊id 爲p1 的元素時，就交由fun函數來處理
（2） 雙擊事件：
<body>
<div id="div1"
οnclick="zoomout()"
οndblclick="zoomin()">
</div>
</body>
<script>
function zoomout(){
var div1
= document.getElementById("div1");
div1.style.width
= "200px";
div1.style.height
= "200px"
}
function zoomin(){
var div1
= document.getElementById("div1");
div1.style.width
= "100px";
div1.style.height
= "100px"
}
</script>
（3）鼠標按下/彈起（onmousedown，onmouseup）
<body>
<div id="div1"
οnmοusedοwn="zoomout()"
οnmοuseup="zoomin()">
</div>
</body>
<script>
function zoomout(){
var div1
= document.getElementById("div1");
div1.style.width
= "200px";
div1.style.height
= "200px"
}
function zoomin(){
var div1
= document.getElementById("div1");
div1.style.width
= "100px";
div1.style.height
= "100px"
}
</script>
（4）鼠標移入/移出（onmouseenter，onmouseleave）
<div
id="div1"
οnmοuseenter="zoomin()"
οnmοuseleave="zoomout()">
</div>
</body>
<script>
function zoomout(){
var div1
= document.getElementById("div1");
div1.style.width
= "200px";
div1.style.height
= "200px";
div1.style.backgroundColor
="red";
}
function zoomin(){
var div1
= document.getElementById("div1");
div1.style.width
= "100px";
div1.style.height
= "100px";
div1.style.backgroundColor
="blue";
}
</script>
（1） onmouseover，onmouseout
與（onmouseenter，onmouseleave）類似，區別後邊再講。
<script>
var div1
= document.getElementById("div1");
var div2
= document.getElementById("div2");
/*div1.οnmοuseenter= enter1;//它會阻止冒泡
div2.onmouseenter = enter2;*/
div1.onmouseover =
enter1;
div2.οnmοuseοver=
enter2;//它不會
function enter1(){
alert("進入div1");
}
function enter2(){
alert("進入div2");
}
</script>
當使用msouseenter事件時，當裏層的div觸發進入事件時，處理完了就完事了（阻斷冒泡）；而使用mouseover事件時，當裏層的div觸發進入事件時，處理完了還會冒泡給父容器處理進入事件。
（2） 鼠標移動 onmsousemove
<div
id="div1"
οnmοusemοve="move(event)">
</div>
鼠標的座標<p id="p1"
></p>
</body>
<script>
function move(e){
var p1
= document.getElementById("p1");
p1.innerText
= e.clientX+","+e.clientY;
}
</script>
（3） 鼠標的滾動
<script>
var width
= 100;
var height
= 100;
function wheel(e){
if(e.wheelDelta
> 0){
width+=
5;
height+=6;
}else{
width-=
5;
height-=
6;
}
var div1
= document.getElementById("div1");
div1.style.width
=width+"px";
div1.style.height
=height+"px";
}
</script>
鍵盤事件：
（1） keypress
<input
id="what"
type="text" οnkeypress="search(event)"/>
</body>
<script>
function search(e){
if(e.keyCode
==13){
varwhat
= document.getElementById("what");
alert("開始搜索"+what.value)
}
}
</script>
KeyCode屬性記錄了按下的鍵的編碼。
Keypress事件只能捕獲可以打印字符的按鍵，不能捕獲諸如 shift、ctrl、alt等不可打印字符的按鍵。
但是可以通過shiftkey、ctrlkey等屬性判斷在擊鍵的同時是否按下了shift、ctrl等輔助鍵。
（2） keydown 、keyup可以捕獲鍵盤上所有的鍵（個別的除外）。
<body
οnkeydοwn="move(event)">
<img id="img1"
src="55ee31f080d8e7022.jpg"
alt=""/>
</body>
<script>
var top1
= 0;
var left
= 0;
function move(e){
switch (e.keyCode){
case37:left
-=5; break;
case38:top1
-=5; break;
case39:left
+=5; break;
case40:top1
+=5; break;
}
var img1
= document.getElementById("img1");
img1.style.top
= top1+"px";
img1.style.left
= left+"px";
}
</script>
總結：
（1） 使用變量top導致上下移動失敗，原因是和window.top這個全局變量衝突了，換個變量名就好了。
（2） 如果把變量top1和left移入函數中，發現只能移動5像素，原因是函數內部的局部變量在每次調用函數是都會重新創建並初始化，也就是說每一次調用top和left的值都是0，不會保留上一次的值，如果想要值不變，那就必須使用全局變量。
其他事件：
Onload：頁面加載事件
Onfocus：獲得焦點的事件
Onblur：失去焦點事件
Onchange：
10.3 事件的註冊
三種方法：
（1） 使用onxxx屬性 比如οnclick=”fun()”
（2） 通過js去設置元素的onxxx屬性
（3） 通過addEventListener註冊
<script>
var txt1
= document.getElementById("txt1");
//註冊事件的第二種方法
txt1.onblur =
blur1;
//註冊事件的第三種方法
txt1.addEventListener("change",function
change(e){
alert("值改變了");
});
function focus1(){
var txt1
= document.getElementById("txt1");
txt1.style.backgroundColor=
"red";
}
function blur1(e){
var txt1
= document.getElementById("txt1");
txt1.style.backgroundColor=
"blue";
}
後兩種方法有何好處？將頁面的內容、樣式和行爲分離，內容和樣式可能是美工人員去完成，行爲（實際上就是js的內容）往往是程序員的事情。分離後利於分工合作。
第三種方式 addEventListener的第一個參數事件名，第二個參數事件處理函數。可以添加事件監聽，當然也就可以移除，用的是removeEventListener參數是一樣的。
而且通過addEventListener和removeEventListener甚至我們可以去動態地去註冊不同的事件處理程序。
