JavaScript中的5種事件使用方式解說

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

為組件提供事件處理入口，可以極大的提高組件的封閉性，同時又能讓組件很好的和外界通訊。並且這也是我們已經習慣使用的一種開發模式，.NET、DHTML等都提供了一套完整的事件處理模型。下面是關於使用DHTML中事件的一個總結。

    DHTML提供了3種事件的使用方式，它們分別是：

    1、Inline HTML: <ELEMENT onXXX='handler'></ELEMENT>
    這是最簡單最常用的事件綁定方式，不過這裡onXXX的值為handler是不太確切的說法。其實這個handler的位置可以放置任何合法的JavaScript語句，因為IE在產生DHMTL樹時會為當前Element構建一個'匿名'成員方法，onXXX指向這個方法的handler。比如我們寫下，<element id='elmt' onXXX='var abc =0; for ( var i=0 ; i < 100 ; i++ ) abc+=i;'></element>，實際上在DHMTL樹種存在如下代碼結構：

function anonymous()
{
var abc =0; for ( var i=0 ; i < 100 ; i++ ) abc+=i;
}

此時anonymous方法中的this就是elmt對象。

    2、Event property: object.onXXX = handler
    這個使用方法是把函數名(handler)賦予element預定義的事件屬性上(onXXX)。這裡需要注意兩個問題：
    一是，我們在使用object.onXXX = handler是需要保證object已經在頁面中產生。比如我們為document.body賦予事件處理函數，我們必須保證document.body已經存在，就是說我們不能在<body>之前在的全域語句中使用document.body；
    二是，handler必須是函數名，和使用方法1中的handler可以是任何JavaScript語句不同！我們最容易出錯的使用是，當我們習慣了在inline html中使用<element id='elmt' onXXX = 'return false'></element>後，如果這樣使用elmt.onXXX='return false;'。那麼就歇菜了，不會有任何執行效果，當然IE也不報錯。正確的使用是：

elmt.onXXX = function() { return false; }

3、Named Script: <SCRIPT FOR = object EVENT = onclick>
IE獨家支援，沒有怎麼使用過，不覺得有什麼特別的地方哈。如果您知道它的妙處願聞其詳。

DOM提供了兩種事件處理使用，它們分別是：

    1、attachEvent method:
    使用方法：bSuccess = object.attachEvent(sEvent, fpNotify)。解釋就抄msdn了
    Parameters

sEvent	Required. String that specifies any of the standard .
fpNotify	Required. Pointer that specifies the function to call when sEvent fires.

Return Value
Boolean. Returns one of the following possible values:

true	The function was bound successfully to the event.
false	The function was not bound to the event.

DOM提供的這個事件附加方式實際上是一個集合操作，我們可以多次的向同一個事件簽名上attach多個事件處理函數，比如：

window.attachEvent('onload', handler1);
window.attachEvent('onload', handler2);
window.attachEvent('onload', handler3);
window.attachEvent('onload', handlerN);

將會執行這個N個handler，但是不保證執行順序。這裡有個例外，attachEvent在document.body上attach事件'onload'沒有效果，但是attch window對象的'onload'是正確的。根據頁面初始化順序來看，及document.body.attachEvent('onload', handler)返回true來看，這因該是IE的一個bug。

注意DHTML的Event Property方式和DOM的attachEvent方式的區別：

Event Property方式，當觸發事件時，事件處理函數是一個無參數函數，我們只能通過event這個window的屬性來讀取和事件相關的資訊。attachEvent方式，當事件處理函數被觸發時，該函數的第一個參數arguments[0]，預設是該視窗上的event。什麼意思呢？不明白參看這裡。

2、fireEvent method
請參看：在什麼時候才會用到fireEvent方法呢?

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More