javascript 事件监听机制

时间:2010-04-12 12:27:06  来源:第二电脑网  作者:第二电脑网

  第二电脑网导读:nt.getElementById('mousemat'); ... var mouseRouter=new jsEvent.EventRouter(mat,"onmousemove"); mouseRouter.addListener(writeStatus); mouseRouter.addListener(drawThumbnail); } 我们定义了一个EventRouter对象,传入DOM元素并希望注册为参数的事件类型。然后向路由器对象增加监听器函数,路...
  正文:

JavaScript实现观察者

定义一个通用的事件路由器对象,它为目标元素附加一个标准函数,作为一个事件回调,并且维护一个监听器函数的列表。下面的代码

window.onload=function(){

var mat=document.getElementById('mousemat');

...

var mouseRouter=new jsEvent.EventRouter(mat,"onmousemove");

mouseRouter.addListener(writeStatus);

mouseRouter.addListener(drawThumbnail);

}

我们定义了一个EventRouter对象,传入DOM元素并希望注册为参数的事件类型。然后向路由器对象增加监听器函数,路由器对象也支持removeListener()方法,这里我们不需要该方法。这个对象看起来很直接,但是我们如何实现它呢?

首先,我们为对象编写一个构造函数,这在JavaScript中仅仅是一个函数

jsEvent.EventRouter=function(el,eventType){

this.lsnrs=new Array();

this.el=el;

el.eventRouter=this;

el[eventType]=jsEvent.EventRouter.callback;

}

我们定义了监听器函数的数组(最初它是空的),保存了一个到DOM元素的引用,并且给DOM元素添加了一个到这个对象的引用。

然后我们分配一个EventRouter类的静态函数,简单地称作callback,作为事件处理函数。记住在JavaScript中,方括号和点记号是等同的,这意味着:

el.onmouSEOver



el['onmouseover']

是相同的。为使用方便,我们将属性名称作为参数传递进来。这与Java或者.NET语言的反射是类似的。

然后,让我们看看callback:

jsEvent.EventRouter.callback=function(event){

var e=event || window.event;

var router=this.eventRouter;

router.notify(e)

}

因为这是一个回调函数,函数上下文是触发事件的DOM节点,而不是路由器对象。我们使用前面提到的后端对象模式得到已经附加在 DOM 节点上的EventRouter的引用,然后调用路由器的notify()方法,将事件对象作为参数传递进来。

然后我们看看下面的广为流传的来自csdn的文档:

给对象增加一个简单的自定义事件机制

By: 泣红亭
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>给对象增加一个简单的自定义事件机制</title>
</head>

<body>
<script type="text/javascript">
function MyObject()
{
// 保存事件监听函数数组
this.RunEventListeners = new Array();
}

MyObject.prototype.Run = function()
{
// 在这里实现Run方法的代码并且触发
// 下边是激活onrun事件
for(var i = 0; i < this.RunEventListeners.length; i++)
this.RunEventListeners[i](this);
}

MyObject.prototype.AddEvent = function(name, listener)
{
switch(name.toLowerCase())
{
case "onrun":
this.RunEventListeners[this.RunEventListeners.length] = listener;
break;
// 还可以在这里增加各种事件,最好判断一下该listener是事已经被添加,以免重复执行,不过这里省了
default:
break;
}
}

function OnRun1(sender)
{
alert("已经执行了OnRun1事件")
}

function OnRun2(sender)
{
alert("已经执行了OnRun2事件");
}

var myobj = new MyObject();

// 添加两个监听函数
myobj.AddEvent("onrun", OnRun1);
myobj.AddEvent("onrun", OnRun2);


// 执行Run方法,如无例外,会触发onrun事件
myobj.Run();
</script>
</body>

</html>


By: 月影
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>给对象增加一个简单的自定义事件机制</title>
</head>

<body>
<script type="text/javascript">
Function.prototype.DECLEAR_EVENT = function(evt_type)
{
var args = arguments;
var method = this;

javascript 事件监听机制》由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Programming/JavaScript/13582.html


关键字:

关于《javascript 事件监听机制》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td