{{JS}}事件句柄

１.作爲HTML屬性的事件句柄
事件句柄被設置爲js代碼（在原始事件模型中），作爲HTML的屬性值。

２.事件句柄的返回值
在多數情況下，事件句柄（無論是HTML屬性設置的，還是JS屬性設置的）都使用它的返回值說明事件的處理方法。通常若瀏覽器執行了某種默認動作來響應一個事件，那麼可以返回false阻止瀏覽器執行那個動作。通過返回false阻止執行默認動作的事件句柄包括onsubmit,onclick,onkeydown,onkeypress,onmousedown,onmouseup,onreset。
注：關於返回false的規則有一個例外，即當用戶把鼠標移到一個超鏈接或圖像上時，瀏覽器的默認動作是在狀態樣上顯示鏈接的URL。要阻止這種情況發生可以讓onmouseover事件句柄返回false。如下
<a href="help.html" οnmοuseοver="window.status='Help!';return true;">Help</a>
這個例外的產生是沒有任何原因的.大多數瀏覽器認爲隱藏鏈接的目標的能力是一個安全漏洞，並且關閉了這一功能。

3.事件句柄和this關鍵字
無論是用HTML屬性定義事件句柄，還是用JS屬性定義事件句柄，都是把一個函數賦予文檔元素的一個屬性。即是在定義文檔元素的一個新方法。在事件句柄被調用時，它是作爲產生事件的元素的方法調用的，故this關鍵字引用了那個目標元素。

4.事件句柄的作用域
在把一個HTML屬性的值設置爲JS字符串，以便定義事件句柄時，隱式地定義一個函數。以這種方式定義的事件處理函數的作用域與常規方法定義的全局函數不同。這意味着定義爲HTML屬性的事件句柄，它所執行的作用域和其它函數的作用域不同。
定義爲HTML屬性的事件句柄具有複雜的作用域鏈。它們的作用域鏈的頭是調用對象（call object），但是事件句柄的作用域中的下一個對象卻並不是全局對象，而是觸發事件句柄的對象。如假定使用<input>標記在HTML表單中定義了一個Button對象，然後使用onclick屬性定義了一個事件句柄。如果該事件句柄的代碼使用了一個名爲form的變量，那麼該變量就會被解析爲Button對象的form屬性。

理解事件句柄的擴展的作用域的另一種方式是，考慮把HTML事件句柄屬性的JS文本翻譯成一個JS函數，如下
<input id="b3" type="button" value="3" οnclick="alert(b4.value);" />
對等的JS代碼可能如下所示：
var b3 = document.getElementById("b3");
b3.onclick = function() {
with(document) {
with(this.form) {
with(this) {
alert(b4.value);
}
}
}
}
重複的with語句創建了一個擴展的作用域鏈。

事件句柄的作用域中有目標對象非常方便，但包括其它文檔元素的擴展作用域卻非常麻煩。例如，Window對象和Document對象都定義了名爲open()的方法。如果沒有限定條件，只用標識符open，那麼引用的幾乎總是window.open()方法。但在定義爲HTML屬性的事件句柄中，Document對象在作用域中先於Window對象，所以用open引用的是document.open()方法；同樣，若給一個Form對象添加一個名爲window的屬性或name="window"定義的一個輸入元素，則在事件句柄中調用window會指向該屬性或name="window"的輸入元素，而不是全局的Window對象。

所以在定義作爲HTML屬性的事件句柄時，一定要小心。最安全的方法是，使這種句柄儘量簡單。理想的方法是，讓它們只調用在別的地方定義的全局函數，儘量避免長作用域鏈帶來的麻煩。

最後，請記住，關於事件句柄作用域的完整討論只適用於定義爲HTML屬性的事性句柄。如果把一個函數賦予適當的JS事件句柄屬性來設置事件句柄，那麼根本不涉及特殊的作用域鏈，函數在定義它的作用域中執行。

注：分享Ubuntu下iBus中五筆輸入法切換中英文符號的快捷鍵：Ctrl+.