js自訂事件及事件互動原理概述(一)_javascript技巧

在JS中事件是JS與瀏覽器互動的主要途徑。事件是一種叫做觀察者的設計模式，這是一種創建鬆散耦合程式碼的技術。物件可以發布事件，用來表示在該物件生命週期中某個有趣的時刻到了。然後其他對象可以觀察該對象，等待這些有趣的時刻到來並透過運行程式碼來回應。

觀察者模式有兩類物件組成：主題和觀察者。主體負責發布事件，同時觀察者透過訂閱這些事件來觀察該主體。這個模式的一個關鍵概念是主體並不知道觀察者的任何事情，也就是說它可以獨自存在並正常運作即使觀察者不存在。從另一方面來說，觀察者知道主體並能註冊事件的回呼函數（事件處理程序）。涉及DOM上時，DOM元素就是主體，你的事件處理程式碼就是觀察者。

事件是與DOM互動的最常見的方式，但它們也可以用於非DOM程式碼中----透過實作自訂事件。自訂事件背後的概念是創建一個管理事件的對象，讓其他對象監聽那些事件。說簡單點就是我們希望在程式運行的時候，路線可能會有很多，如果程式運行到了一個特殊的地方，我們希望立刻運行用戶註冊的方法裡面的程式碼，運行完畢後再繼續運行，這個過程叫做監聽。

例如，建立一個檔案MyEvent.js文件，裡面建立一個類別：

複製程式碼 程式碼如下:

function MyEvent(){
this.handler;
}
MyEvent.prototype={
addHandler:function(handler)
{
{
.handler=handler;
},
fire:function()
{
this.handler();
},
removeHandler:function()
{
{
this.handler=null;
}

}


上面使用js原型的思想創建的一個類，如果讀者不太了解可以查看相關資料。 MyEvent類型有一個單獨的屬性handler，用來儲存事件處理程序（也就是使用者註冊的方法）。還有三個方法：addHandler()，用於註冊事件處理程序；fire()，用於觸發一個事件；以及removeHandler()，用於註銷事件的處理程序。

然後我們可以這樣使用，新建一個html文件，放於和MyEvent.js同一個目錄，方便引用。程式碼如下： 複製程式碼

程式碼如下:

上述的註解已經很詳細的說明了其中的一種使用方式。這是一個最簡單的自訂事件，不過還有很多缺陷，如何優化將在（二）裡面講解。