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

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

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

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

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

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

例如，創(chuàng)建一個(gè)文件MyEvent.js文件，里面創(chuàng)建一個(gè)類：

復(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)建的一個(gè)類，如果讀者不太了解可以查看相關(guān)資料。MyEvent類型有一個(gè)單獨(dú)的屬性handler，用于存儲(chǔ)事件處理程序（也就是用戶注冊(cè)的方法）。還有三個(gè)方法：addHandler()，用于注冊(cè)事件處理程序；fire()，用于觸發(fā)一個(gè)事件；以及removeHandler()，用于注銷事件的處理程序。

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

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

 
<html> 
<head> 
<title></title> 
<script type="text/javascript" src="MyEvent.js"></script> 
<script type="text/javascript"> 
function init() 
{ 
//初始化一個(gè)事件對(duì)象 
var myEvent=new MyEvent(); 
//注冊(cè)方法 
myEvent.addHandler(myMethod); 
//運(yùn)行到此處時(shí)觸發(fā)事件 
myEvent.fire(); 
//移除事件注冊(cè)的方法 
myEvent.removeHandler(); 
//再次觸發(fā)事件，發(fā)現(xiàn)無(wú)效 
myEvent.fire(); 
} 
function myMethod() 
{ 
alert("成功"); 
} 
</script> 
</head> 
<body> 
<input type="button" onclick="init()" value="測(cè)試" /> 
</body> 
</html> 