事件
1 事件的概念
事件源
事件名
事件註冊
事件處理
以火災爲例：
酒店201房間發生火災，119電話報警，南湖區消防支隊出警趕赴現場，通過灑水作業成功滅火。
事件源：酒店201房間
事件名：火災
事件註冊：事先已經規劃好片區，酒店所屬片區歸南湖區縣防指對負責。
事件處理：灑水滅火
2 常用事件
鼠標常用事件：
(1) 點擊事件onclick
<body>
<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）雙擊事件
<styletype="text/css">
#div1{
width:100px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div
id="div1" οnclick="zoomout()"οndblclick="zoommin()"></div>
</body>
<script>
function zoomout(){
var div1=
document.getElementById("div1");
div1.style.width="200px";
div1.style.height="200px";
}
function zoommin(){
var div1=
document.getElementById("div1");
div1.style.width="100px";
div1.style.height="100px";
}
（3）鼠標按下/彈起onmousedown onmouseup
<divid="div1" οnmοusedοwn="zoomout()"οnmοuseup="zoommin()"on></div>
（4）鼠標移入或離開onmouseenter onmouseleave會阻止冒泡
<styletype="text/css">
#div1{
width:100px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="div1"οnmοuseenter="blue()"οnmοuseleave="yellow()"on></div>
</body>
<script>
function blue(){
var div1
= document.getElementById("div1");
div1.style.backgroundColor="blue";
}
function yellow(){
var div1
= document.getElementById("div1");
div1.style.backgroundColor="yellow";
}
（5）onmouseover onmouseout與（4）比較相似，也有區別
當時用onmouseenter事件時，當裏層的div觸發進入事件時，處理完了就完事了（阻斷冒泡）；而使用onmouseover事件時，當裏層的div觸發進入事件時，處理完了還會冒泡給父容器處理進入事件。
<styletype="text/css">
#div1{
border:1px solid blue;
}
#div2{
width:100px;
height:100px;
background-color:red;
margin:20px0 20px20px;
}
</style>
<body>
<div id="div1">
<div
id="div2"></div>
</div>
</body>
<script>
var div1=
document.getElementById("div1");
var div2=
document.getElementById("div2");
/*div1.οnmοuseenter= enter1;
div2.onmouseenter = enter2;*/
div1.οnmοuseοver=enter1;
div2.οnmοuseοver=enter2;
function enter1(){
alert("進入div1");
}
function enter2(){
alert("進入div2");
}
</script>
（6）鼠標移動事件onmousemove
圖片跟着鼠標移動
<styletype="text/css">
#div1{
width:100px;
height:100px;
background-color:red;
}
#img1{
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<img
id="img1" src=" "alt=""/>
<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;
var img1=
document.getElementById("img1");
img1.style.left=e.clientX+"px";
img1.style.top=e.clientY+"px";
}
鍵盤事件
（1）keypress
<inputid="what" type="text" οnkeypress="search(event)"/>
function search(e){
if(e.keyCode
== 13){
var what
= document.getElementById("what");
alert("開始搜索:"+what.value);
}
}
keyCode屬性記錄了按下的鍵的編碼
keyCode只能捕獲可打印字符的按鍵，不能捕獲諸如shift，ctrl，alt等鍵但是可以通過shiftKey，ctrlKey等屬性判斷在擊鍵的同事是否按下了shift、ctrl等輔助鍵。
function
search(e){
alert(e.keyCode);
if(e.shiftKey){
alert("shift鍵也被按下了");
}
if(e.ctrlKey){
alert("ctrl鍵也被按下了");
}
}
（2）keydown，keyup可以捕獲任意鍵（個別除外）
<inputid="what" type="text" οnkeydοwn="keydown(event)"/>
function keydown(e){
alert(e.keyCode);
}
用上下左右移動圖片
<imgid="img1" src="man.png" alt=""/>
var top1=
0;
var left =0;
function move(e) {
switch (e.keyCode) {
case 37:
left-=
5;
break;//左
case 38:
top1-=
5;
break;
case 39:
left+=
5;
break;
case 40:
top1+=
5;
break;
}
var img1 =document.getElementById("img1");
img1.style.left=
left + "px";
img1.style.top=
top1 + "px";
}
總結：
（1）使用變量top到時上下移動失敗，原因是和window.top這個全局變量衝突了，換個變量名就好了。
（2）還有在這裏可以使用全局變量。如果把變量寫到函數裏，就只能移動一次。原因是函數內部的局部變量是在每次調用該函數是都會重新創建並初始化，也就是說每一次調用left和top1的值都是0，不會保留上一次的值。
其他事件
onload，頁面加載
onfocus，獲得焦點
onblur，失去焦點
<inputid="text1" type="text" οnfοcus="focus1()"οnblur="blur1()"/>
function focus1(){
var text1
= document.getElementById("text1");
text1.style.backgroundColor="blue";
}
function blur1(){
var text1
= document.getElementById("text1");
text1.style.backgroundColor="red";
}
onchange
3 事件的註冊
三種方法：
（1）使用onXXX屬性，比如οnclick="方法名()"
（2）通過js去設置元素的onXXX屬性
（3）通過addEventListener
//註冊事件的第二種方法
var text1=
document.getElementById("text1");
text1.onblur = blur2;
//註冊事件的第二種方法
text1.addEventListener("change",function(){
alert("值改變了");
});
後兩種方法有何好處：
將頁面的內容、樣式和行爲分離，內容和樣式可能是美工人員去完成，行爲（實際上就是hs的內容）往往是程序員的事。分離後利於分工合作。
第三種方式addEventListeren的第一個參數是事件名，第二個參數是處理函數，可以添加事件監聽，當然也可以移除，用的是removeEventListeren，參數與add是一樣的。而企業可通過addEventListeren與removeEventListeren甚至可以去動態額註冊不同的事件處理程序。
10.4 捕獲與冒泡
<styletype="text/css">
#div1{
width:100px;
height:100px;
background-color:red;
}
</style>
<divid="div1">
<p id="p1">捕獲與冒泡</p>
</div>
<script>
var div1
= document.getElementById("div1");
var p1
= document.getElementById("p1");
p1.addEventListener("click",click1);
div1.addEventListener("click",click2);
function click1(){
alert("段落被單擊了");
}
function click2(){
alert("div被單擊了");
}
</script>
如果文字被單擊了，先提示段落被單擊了，在提示div被單擊了，因爲div是父容器，單擊文字也就是單擊div，所以兩者都會觸發這個事件。如果點擊文字之外的框，提示div被單擊了。
但是如何去規定兩個事件的處理順序呢？這就是事件的冒泡和捕獲
冒泡：按照從內到外的順序依次相應觸發：默認方式。
捕獲：與冒泡相反。
p1.addEventListener("click",click1);
div1.addEventListener("click",click2,true);
當然，程序員可以根據自己的需要阻斷冒泡
stopPropagation();
