首頁 > 開發者 > JavaScript
一般的javascript中可以調用一些常用的事件處理常式，如：
objButton.onclick=doClick;
function doClick(event)
{
//do something...
}
但是這種方式的事件處理有一個缺點，那就是每次事件只能相應一個處理常式，當然可以辦處理常式寫入一個函數中，
但是如果這樣的話就缺少了靈活性，不能將其處理進行動態設定，所以寫一個javascript的EventHandler，來實現
var jsEvent=new Array();
jsEvent.EventRouter=function(el,eventType)
{
this.lsnrs=new Array(); //放置訂閱成員的容器
this.el=el; //對DOM元素引用
el.eventRouter=this; //對事件處理類本身進行引用，用於在後面得到事件處理類的Context
el[eventType]=jsEvent.EventRouter.callback; //對DOM元素本身具有的事件進行訂閱
}
jsEvent.EventRouter.prototype.addListener=function(lsnr) //對EventRouter新增成員函數
{
this.lsnrs.append(lsnr,true);
}
jsEvent.EventRouter.prototype.removeListener=function(lsnr) //對EventRouter新增成員函數
{
this.lsnrs.remove(lsnr);
}
jsEvent.EventRouter.prototype.notify=function(e) //進行訂閱函數迴圈調用
{
var lsnrs=this.lsnrs; //引用訂閱器數組
for(var i=0;i<lsnrs.length;i++)
{
var lsnr=lsnrs[i];
lsnr.call(this,e); //用call函數進行函數調用，this : EventRouter的Context ; e : event
}
}
jsEvent.EventRouter.callback=function(event) //對事件調用的Context進行轉換，因為此時的this代表DOM元素本身
{ //必須將Context（即this）指向EventRouter
var e=event || window.event;
var router=this.eventRouter;
router.notify(e);
}
將上述函數儲存到js檔案中，就可以在用戶端進行DOM元素的事件訂閱處理了
代碼如下：
<html>
<head>
<link rel='stylesheet' type='text/css' href='mousemat.css' />
<script type='text/javascript' src='eventRouter.js'></script>
<script type='text/javascript'>
window.onload=function(){
var objButton=document.getElementById('button');
var buttonClick=new jsEvent.EventRouter(objButton,"onclick");
buttonClick.addListener(writeAbc);
buttonClick.addListener(writeEfg);
}
function writeAbc()
{
var divDisplay=document.getElementById('display');
divDisplay.innerText = "abc";
}
function writeEfg()
{
alert("efg");
}
</script>
</head>
<body>
<div class='mousemat' id='mousemat'></div>
<div class='thumbnail' id='thumbnail'>
<div class='cursor' id='cursor'/>
</div>
</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
