10事件
10.1事件的概念
事件源：
事件名：
事件註冊：
事件處理：
以火災爲例：
粵商大酒店201房間發生火災，119電話報警，南湖區消防支隊出警，趕赴現場通過噴水作業成功滅火。
事件源：粵商大酒店201房間
事件名：火災
事件註冊：實現已經規劃好片區，粵商大酒店所屬片區歸南湖區消防支隊負責
事件處理：噴水
10.2常用事件
鼠標的常用事件：
（1）click（單機）事件
<body>
<p id ="p1"
onclick="fun()">單擊事件測試</p>
</body>
<script>
function
fun(){
//獲取到指定元素
var
p1 = document.getElementById("p1");
p1.innerText
= "我被單擊了";
p1.style.fontSize
= "60px";
}
</script>
在這個案例中，事件起源就是id爲“p1”的元素，事件名是單擊，事件註冊是onclick = “fun()”，也就是說當單擊id爲“p1”的元素時，就交由fun函數來處理。
（2）雙擊事件
<style
type="text/css">
#div1{
width:
100px;
height:
100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id ="div1"
onclick = "zoomout()"
ondblclick="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";
}
</script>
(3)鼠標按下/彈起（onmousedown onmouseup）
<style
type="text/css">
#div1{
width:
100px;
height:
100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id ="div1"
onmousedown ="zoomout()"
onmouseup ="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";
}
</script>
(4)鼠標移入/離開 onmouseenter onmouseleave
<style
type="text/css">
#div1{
width:
100px;
height:
100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id ="div1"
onmouseenter ="red()"
onmouseleave ="blue()">
</div>
</body>
<script>
function
red(){
var
div1 = document.getElementById("div1");
div1.style.backgroundColor
= "red";
}
function
blue(){
var
div1 = document.getElementById("div1");
div1.style.backgroundColor
= "blue";
}
</script>
（5）onmouseover onmouseout
與onmouseenter onmouseleave很類似，區別後面補充
（6）鼠標移動onmoumove
<style
type="text/css">
#div1{
width:
300px;
height:
300px;
background-color: skyblue;
}
#img1{
position: absolute;
top:
0;
left:
0;
}
</style>
</head>
<body>
<div id =
"div1" onmousemove ="move(event)">
<img id =
"img1" src="tp1.png">
</div>
鼠標的座標<p
id = "p1"></p>
</body>
<script>
function
move(e){
var
p1 =document.getElementById("p1");
var
img1 =document.getElementById("img1");
p1.innerText
= e.clientX+","+ e.clientY;
img1.style.top
= e.clientY
+ "px";
img1.style.left
= e.clientX
+ "px";
}
</script>
（7）鼠標中鍵滾軸onmousewheel
<style
type="text/css">
#div1{
width:
100px;
height:
100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id =
"div1" onmousewheel ="wheel(event)">
</div>
</body>
<script>
var
width = 100;
var
height = 100;
function
wheel(e){
if(e.wheelDelta
>0){
width +=5;
height +=5;
}else{
width -=5;
height -=5;
}
var
div1 = document.getElementById("div1");
div1.style.width
= width+"px";
div1.style.height
= height+"px";
}
</script>
鍵盤事件
（1）Keypress
<body>
<input id =
"what" type="text"
onkeypress="search(event)">
</body>
<script>
function
search(e){
if(e.keyCode
== 13){
var
what = document.getElementById("what");
alert("開始搜索："+
what.value);
}
}
</script>
keyCode屬性記錄了按下的鍵的編碼
Keypress事件只能捕獲可打印字符的按鍵，不能捕獲諸如shift、ctrl、alt等不可打印字符的按鍵.
但是可以通過shiftkey、ctrlkey等屬性判斷在擊鍵的同時是否按下了shift、ctrl等輔助鍵
（2）onkeydown\onkeyup可以捕獲鍵盤上所有的鍵（個別除外）。
<style
type="text/css">
#img1{
position: absolute;
top:
0;
left:
0;
}
</style>
</head>
<body onkeydown="move(event)">
<img id =
"img1" src="tp1.png">
</div>
</body>
<script>
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.top
= top1 + "px";
img1.style.left
= left + "px";
}
</script>
總結：
（1）使用top導致上下移動失敗，原因是和window top這個全局變量衝突了，換個變量名就好。
（2）如果把變量top1和left移入函數中，發現只能移動5像素。原因是函數內部的局部變量在每次調用函數時都會重新創建並初始化，也就是說每一次調用left和top1的值都是0，不會保留上一次的值，如果需要保留，就只能用全局變量了。
其他事件：
onload：頁面加載事件
onfocus:獲取焦點事件
onblur:失去焦點事件
onchange:值改變事件
10.3事件的註冊
三種方法：
（1）onXXX屬性，比如onclick=“fun()”
（2）通過js去設置元素的onXXX屬性
（3）通過addEventLiser註冊
<body>
<input type="text"
id="txt1"
onfocus="focus1()"
>
</body>
<script>
//註冊事件的第二種方法
var
txt1 = document.getElementById("txt1");
txt1.onblur =
blur1;
//註冊事件的第三種方法
txt1.addEventListener("change",change1);
function
focus1(){
txt1.style.backgroundColor
= "blue";
}
function
blur1(){
txt1.style.backgroundColor
= "pink";
}
function
change1(){
alert("值改變了");
}
</script>
後兩種方法有何好處？
將頁面的內容、樣式和行爲分離，內容和樣式可能是美工人員去完成，行爲（實際上就是JS的內容）往往是程序員的事，分離後利於分工合作。
第三種方式addEventLiser的第一個參數是事件名，第二個參數是事件處理函數。
可以添加事件監聽，當然也就可以移除，用的是removeEventListener，參數與addEventListener參數是一樣的。
通過addEventListener和removeEventListener甚至我們可以去動態地註冊不同的事件處理程序。
在這個案例中，如果單擊文字，先提示“段落被單擊”，然後再提示“div被單擊”。因爲div是段落的父容器，所以單擊段落也就單擊了div，所以兩者都會觸發這個事件。
但是如何去規定兩個事件的處理順序呢？這就是時間的冒泡和捕獲。
冒泡：按照從內到外的順序依次觸發；默認方式；
捕獲：按照從外到內的順序依次觸發。
<style>
#div1{
border:
1px solid blue;
}
#div2{
width:
100px;
height:
100px;
background-color: skyblue;
margin:
10px;
}
</style>
</head>
<body>
<div id ="div1">
<div id ="div2">
</div>
</div>
</body>
<script>
var
div1 = document.getElementById("div1");
var
div2 = document.getElementById("div2");
div1.onmouseenter
= enter1;
div2.onmouseenter
= enter2;
// div1.onmouseleave = leave1();
// div2.onmouseleave = leave2();
div1.onmouseover =
enter1;
div2.onmouseover =
enter2;
function
enter1(){
alert("進入div1");
}
function
enter2(){
alert("進入div2");
}
// function leave1(){
// alert("離開div1");
// }
// function leave2(){
// alert("離開div2");
// }
</script>
當使用mouseenter事件時，當裏層的div觸發進入事件時，處理完了就完事了（阻斷冒泡）；而使用mouseover事件時，當裏層的div觸發進入事件時，處理完了還會冒泡給父容器處理進入事件。