您的位置：首页 > Web前端 > JavaScript

用javascript写事件处理

2006-09-25 12:59 351 查看

一般的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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航