首頁 > 開發者 > JavaScript
在JS中事件是JS與瀏覽器互動的主要途徑。事件是一種叫做觀察者的設計模式，這是一種建立鬆散耦合代碼的技術。對象發行就緒事件，用來表示在該對象生命週期中某個有趣的時刻到了。然後其他對象可以觀察該對象，等待這些有趣的時刻到來並通過運行代碼來響應。
觀察者模式有兩類對象組成：主題和觀察者。主體負責發布事件，同時觀察者通過訂閱這些事件來觀察該主體。該模式的一個關鍵概念是主體並不知道觀察者的任何事情，也就是說它可以獨自存在並正常運作即使觀察者不存在。從另一方面說，觀察者知道主體並能註冊事件的回呼函數（事件處理常式）。涉及DOM上時，DOM元素便是主體，你的事件處理代碼便是觀察者。
事件是與DOM互動的最常見的方式，但它們也可以用於非DOM代碼中----通過實現自訂事件。自訂事件背後的概念是建立一個管理事件的對象，讓其他對象監聽那些事件。說簡單點就是我們希望在程式啟動並執行時候，路線可能會有很多，如果程式運行到了一個特殊的地方，我們希望立刻運行使用者註冊的方法裡面的代碼，運行完畢後再繼續運行，這個過程叫做監聽。
例如，建立一個檔案MyEvent.js檔案，裡面建立一個類：
複製代碼 代碼如下:
function MyEvent(){
this.handler;
}
MyEvent.prototype={
addHandler:function(handler)
{
this.handler=handler;
},
fire:function()
{
this.handler();
},
removeHandler:function()
{
this.handler=null;
}
}
上面使用js原型的思想建立的一個類，如果讀者不太瞭解可以查看相關資料。MyEvent類型有一個單獨的屬性handler，用於儲存事件處理常式（也就是使用者註冊的方法）。還有三個方法：addHandler()，用於註冊事件處理常式；fire()，用於觸發一個事件；以及removeHandler()，用於登出事件的處理常式。
然後我們可以這樣使用，建立一個html檔案，放於和MyEvent.js同一個目錄，方便引用。代碼如下：
複製代碼 代碼如下:
<html>
<head>
<title></title>
<script type="text/javascript" src="MyEvent.js"></script>
<script type="text/javascript">
function init()
{
//初始化一個事件對象
var myEvent=new MyEvent();
//註冊方法
myEvent.addHandler(myMethod);
//運行到此處時觸發事件
myEvent.fire();
//移除事件註冊的方法
myEvent.removeHandler();
//再次觸發事件，發現無效
myEvent.fire();
}
function myMethod()
{
alert("成功");
}
</script>
</head>
<body>
<input type="button" onclick="init()" value="測試" />
</body>
</html>
上述的注釋已經很詳細的說明了其中的一種使用方式。這就是一個最簡單的自訂事件，不過還有很多缺陷，如何最佳化將在（二）裡面進行講解。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
