快捷導(dǎo)航

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

更新時間：2013年02月01日 12:22:30 作者：

在JS中事件是JS與瀏覽器交互的主要途徑,本文主要介紹下最簡單的自定義事件，不過還有很多缺陷，感興趣的朋友可以了解下，或許對你學(xué)習(xí)自定義事件有所幫助

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

觀察者模式有兩類對象組成：主題和觀察者。主體負責(zé)發(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)建一個類：

復(fù)制代碼代碼如下:

 
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同一個目錄，方便引用。代碼如下：

復(fù)制代碼代碼如下:

 
<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); 
//運行到此處時觸發(fā)事件 
myEvent.fire(); 
//移除事件注冊的方法 
myEvent.removeHandler(); 
//再次觸發(fā)事件，發(fā)現(xiàn)無效 
myEvent.fire(); 
} 
function myMethod() 
{ 
alert("成功"); 
} 
</script> 
</head> 
<body> 
<input type="button" onclick="init()" value="測試" /> 
</body> 
</html> 