.事件流
事件捕獲-(處于事件目標(biāo)階段-事件冒泡)
1.處于事件目標(biāo)階段看成是事件冒泡的一部分，目標(biāo)元素接收到事件
2.但實際上事件捕獲階段也會觸發(fā)對象上的事件，兩個階段都會觸發(fā)事件
二.事件處理程序
1.HTML事件處理程序
給元素添加事件處理程序特性，并將函數(shù)賦值給元素的事件處理程序特性或者直接傳入可執(zhí)行的JS代碼
|
2
3
4
5
6
7 |
<input type="button" value="click me" onclick="showMessage()">
<script>
function showMessage(){
alert("liu");
}
</script>
|
由于HTML與JS代碼緊密耦合，想更換事件的話要修改兩個地方，所以用JS指定事件處理程序
2.JS指定事件處理程序
(1)DOM0級事件處理程序：
將匿名函數(shù)賦值給元素的事件處理程序?qū)傩?/P>
|
2
3
4
5
6
7
8 |
<input type="button" value="click me" id="myBtn">
<script>
var btn=document.getElementById("myBtn");
btn.onclick=function(){
alert(this.id);
};
</script>
|
DOM0級事件處理程序是在元素的作用域中運行，this指向元素的執(zhí)行環(huán)境
DOM0級只能添加一個事件處理程序，所以要添加多個事件要用DOM2級事件處理程序
(2)DOM2級事件處理程序：
添加事件addEventListener():也是在元素的作用域中運行
|
2
3
4
5
6
7
8
9 |
<script>
btn.addEventListener("click",function(){
alert(this.id);
},false);
btn.addEventListener("focus",function(){
alert("hello");
},false);
</script>
|
|
2 |
<font face="Verdana">刪除事件removeEventLister():</font>
|
|
2
3
4
5
6
7
8
9 |
<script>
var handler=function(){
alert(this.id);
};
btn.addEventListener("click",handler,false);
btn.removeEventListener("click",handler,false);
</script>
|
IE事件處理程序：(IE9以前IE沒有用DOM2級事件處理程序，但有與DOM類似的方法)
添加事件attachEvent():事件處理程序會在全局作用域中運行
|
2
3
4
5
6 |
<script>
btn.attachEvent("onclick",function(){
alert(this==window);
});
</script>
|
刪除事件detachEvent()
|
2
3
4
5
6
7
8
9 |
<script>
var handler=function(){
alert(this.id);
};
btn.attachEvent("onclick",handler);
btn.detachEvent("onclick",handler);
</script>
|
|
2 |
<font face="Verdana">(3)跨瀏覽器的事件處理程序：</font>
|
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
<script>
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=handler;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
}
};
</script>
|
三.事件對象
當(dāng)事件觸發(fā)的時候會產(chǎn)生一個事件對象event，包含了與事件有關(guān)的信息：事件類型，導(dǎo)致事件的元素，以及其他特定事件有關(guān)的信息（例如鼠標(biāo)導(dǎo)致的事件，event會包含鼠標(biāo)的位置信息）
1.DOM中的事件對象
比較常用的信息：type,target(目標(biāo)元素),currentTarget(正在處理事件的元素，this始終指向currentTarget)
無論是DOM0級，還是addEventListener()方法，event都可以作為參數(shù)傳入到事件處理程序當(dāng)中
在一個元素上用一個函數(shù)處理多個類型的事件：
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
var btn=document.getElementById("myBtn");
var handler=function(event){
switch(event.type){
case "click":
alert(document.title);
break;
case "focus":
alert(event.target.style.backgroundColor="yellow");
break;
case "mouseover":
alert(event.target.style.backgroundColor="");
break;
default:
}
};
btn.onclick=handler;
btn.onfocus=handler;
btn.onmouseover=handler;
|
2.IE中的事件對象
type,srcElement(事件目標(biāo))
this要看情況，如果是DOM0級，指向目標(biāo)元素，attachEvent()方法，指向window
對于DOM0級，event對象作為window對象的一個屬性存在
|
2
3
4
5
6 |
var btn=document.getElementById("myBtn");
btn.onclick=function(){
var event=window.event;
alert(event.type);
};
|
對于attachEvent()方法，event可以作為參數(shù)傳入事件處理程序中,也可以通過window.event得到
|
2
3
4 |
btn.attachEvent("onclick",function(event){
alert(event.type);
});
|
3.跨瀏覽器的事件對象
|
2
3
4
5
6
7
8
9
10 |
var EventUtil={
getEvent:function(event){
return event?event:window.event;
},
getTarget:function(event){
return event.target||event.srcElemnt;
}
};
|
四.事件類型
1.UI事件
load事件
兩種定義onload事件處理程序的方式
(1)在<body>元素上添加onload特性：
<body onload=”alert(loaded!)”>
(2)用JS指定事件處理程序：
|
2
3
4 |
EventUtil.addHanler(window,"load",function(event){
alert("loaded!");
});
|
建議用JS方法
實際應(yīng)用中，可以在頁面加載完之后，預(yù)先加載圖像 var img=new Image();
unload事件
一般用于清理內(nèi)存
2.焦點事件
focus，blur
|
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<form method="post">
<input type="text" name="username" value="">
<input type="button" value="Echo Username" onclick="alert(username.value)">
</form>
<script>
var text=document.getElementsByName("username")[0];
text.addEventListener("focus",function(event){
event.target.style.backgroundColor="";
},false);
text.addEventListener("blur",function(event){
event.target.style.backgroundColor="yellow";
},false);
</script>
|
五.內(nèi)存
1.事件委托技術(shù)
將一類事件寫成一個事件處理程序，并添加到DOM高層次的元素上
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 |
<ul id="myLinks">
<li id="goSometing">go something</li>
<li id="doSomething">do something</li>
<li id="saySomething">saySometing</li>
</ul>
<script>
var links=document.getElementById("myLinks");
EventUtil.addHandler(links,"click",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
switch(target.id){
case "goSomething":
location.href="baidu";
break;
case "doSomething":
document.title="liu";
break;
case "saySomething":
alert("liu");
break;
}
});
</script>
|
2.清理內(nèi)存:移除事件處理程序
(1)使用innerHTML時，被替換部分元素中的事件處理程序依然在內(nèi)存中，要手動清除
|
2
3
4
5
6 |
btn.onclick=function(){
btn.onclick=null;
document.getElementById("myDiv").innerHTML="";
};
|
(2)卸載頁面的時候，事件處理程序依然會在內(nèi)存中
|
2
3
4 |
EventUtil.addHandler(window,"unload",function(){
links.onclick=null;
});
|
六.模擬事件
