js自定義事件及事件交互原理概述(一)_javascript技巧

在JS中事件是JS與瀏覽器交互的主要途徑。事件是一種叫做觀察者的設(shè)計模式，這是一種創(chuàng)建松散耦合代碼的技術(shù)。對象可以發(fā)布事件，用來表示在該對象生命周期中某個有趣的時刻到了。然后其他對象可以觀察該對象，等待這些有趣的時刻到來并通過運行代碼來響應。

觀察者模式有兩類對象組成：主題和觀察者。主體負責發(fā)布事件，同時觀察者通過訂閱這些事件來觀察該主體。該模式的一個關(guān)鍵概念是主體并不知道觀察者的任何事情，也就是說它可以獨自存在并正常運作即使觀察者不存在。從另一方面說，觀察者知道主體并能注冊事件的回調(diào)函數(shù)（事件處理程序）。涉及DOM上時，DOM元素便是主體，你的事件處理代碼便是觀察者。

事件是與DOM交互的最常見的方式，但它們也可以用于非DOM代碼中----通過實現(xiàn)自定義事件。自定義事件背后的概念是創(chuàng)建一個管理事件的對象，讓其他對象監(jiān)聽那些事件。說簡單點就是我們希望在程序運行的時候，路線可能會有很多，如果程序運行到了一個特殊的地方，我們希望立刻運行用戶注冊的方法里面的代碼，運行完畢后再繼續(xù)運行，這個過程叫做監(jiān)聽。

例如，創(chuàng)建一個文件MyEvent.js文件，里面創(chuàng)建一個類：
代碼如下:
function MyEvent(){
this.handler;
}
MyEvent.prototype={
addHandler:function(handler)
{
this.handler=handler;
},
fire:function()
{
this.handler();
},
removeHandler:function()
{
this.handler=null;
}
}

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

然后我們可以這樣使用，新建一個html文件，放于和MyEvent.js同一個目錄，方便引用。代碼如下：
代碼如下:

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com