JavaScript高級程序設計學習筆記--事件 - Gyoung－IT工程師數位筆記本

文章出處

HTML事件處理程序

<input type="button" value="Click Me" onclick"showMessage()"/>

通過HTML指定事件處理程序的的缺點是HTML與JavaScript代碼緊密耦合。如果要更換事件處理程序，就要改動兩個地方：HTML代碼和JavaScript代碼。

DOM0級事件處理程序

var btn=document.getElementById("myBtn");
btn.onclick=function(){
alert("Clicked");
}

在此，我們通過文檔對象取得了一個按鍵的引用，然后為它指定了OnClink事件處理程序。但要注意，在這些代碼運行以前不會指定事件處理程序，因此如果這些代碼在頁面中位于
按鍵后面，就有可能在一段時間內怎么單擊都沒有反應。
使用DOM0級方法指定的事件處理程序被認為是元素的方法。因此，這時候的事件處理程序是在元素的作用域中運行；換句話說，程序中的this引用當前元素。來看一個例子：

var btn=document.getElementById("myBtn");
btn.onclick=function(){
alert(this.id); //"myBtn"
}

也可以刪除DOM0級方法指定的事件處理程序，只要像下面這樣將事件處理程序屬性的值設置為Null即可：

btn.onclick=null;

DOM2級事件處理程序

"DOM2級事件"定義了兩個方法，用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener();
使用DOM2級方法添加事件處理程序的主要好處是可以添加多個事件處理程序。

var btn=document.getElementById("myBtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);

btn.addEventListener("click",function(){
alert("hello world!");
},false);

這里為按鈕添加了兩個事件處理程序。這兩個事件處理程序會按照添加它們的順序觸發。
通過addEventListener()添加的事件處理程序只能使用removeEventListener()來移除；移除時傳入的參數與添加處理程序時使用的參數相同。這也意味著通過addEventListener()
添加的匿名函數無法移除，如下面所示：

var btn=document.getElementById("myBtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);

btn.removeEventListener("click",function(){ //無效
alert(this.id);
},false);

有效的：

var btn=document.getElementById("myBtn");
var handler=function(){
alert(this.id);
}
btn.addEventListener("click",handler,false);

btn.removeEventListener("click",handler,false); //有效

IE事件處理程序

IE實現了與DOM中類似的兩個方法：attachEvent()和detachEvent()。

事件對象

兼容DOM的瀏覽器會將一個event對象傳入到事件處理程序中。無論指定事件處理程序使用什么方法(DOM0級或DOM2級),都會傳入event對象。來看下面的例子：

var btn=document.getElementById("myBtn");

btn.onclick=function(event){
alert(event.type); //"click"
};

btn.addEventListener("click",function(event){
alert(event.type); //"click"
},false);

在需要通過一個函數處理多個事件時，可以使用type屬性，例如：

var btn=document.getElementById("myBtn");
var handler=function(event){
switch(event.type){
case "click":
alert("Clicked");break;
case "mouseover":
alert("mouseover");break;
case "mouseout":
alert("mouseout");break;
}
}
btn.onclick=handler;
btn.onmouseover=handler;
btn.onmouseout=handler;

要阻止特定事件的默認行為，可以使用preventDefault()方法。

var link=document.getElementById("myLink");
link.onclick=function(event){
event.preventDefault();
}

只有cancelable屬性設置為true的事件，才可以使用preventDefault()來取消默認行為。

事件類型

只要用戶從一個頁面切換到另一個頁面，就會發生unload事件。
只有在同一個元素上相繼觸發mousedown事件和mouseup事件，才會觸發click事件。
DOM的button屬性可能有如下3個值：0表示主鼠標按鈕，1表示中間的鼠標按鈕(滾輪)，2表示次鼠標按鈕
keydown:當用戶按下鍵盤上的做任意鍵時觸發，而且如果按住不放的話，會重復觸發些事件。

事件委托

對“事件處理程序過多”問題的解決方案就是事件委托。事件委托利用了事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。例如，click事件會一直冒泡到
document層次。也就是說，我們可以為整個頁面指定一個onclick事件處理程序，而不必給每個可單擊的元素分別添加事件處理程序。以下面的代碼為例：

<ul id="myLinks">
<li id="goSomewhere">Go somewhere</li>
<li id="doSomething">Do something</li>
<li id="sayHi">Say Hi </li>
</ul>

var list=document.getElementById("myLinks");

EventUtil.addHandler(list,"click",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);

switch(target.id){
case "doSomething":
document.tile="i changed the document's title";break;
case "goSomewhere":
location.href="http://www.wrox.com";break;
case "sayHi":
alert("hi");break;
}
}