用JavaScript实现观察者 D2LLinux联盟
D2LLinux联盟
定义一个通用的事件路由器对象，它为目标元素附加一个标准函数，作为一个事件回调，并且维护一个监听器函数的列表。下面的代码： D2LLinux联盟
D2LLinux联盟
window.onload=function(){ D2LLinux联盟
D2LLinux联盟
var mat=document.getElementById('mousemat'); D2LLinux联盟
D2LLinux联盟
... D2LLinux联盟
D2LLinux联盟
var mouseRouter=new jsEvent.EventRouter(mat,"onmousemove"); D2LLinux联盟
D2LLinux联盟
mouseRouter.addListener(writeStatus); D2LLinux联盟
D2LLinux联盟
mouseRouter.addListener(drawThumbnail); D2LLinux联盟
D2LLinux联盟
} D2LLinux联盟
D2LLinux联盟
我们定义了一个EventRouter对象，传入DOM元素并希望注册为参数的事件类型。然后向路由器对象增加监听器函数，路由器对象也支持removeListener()方法，这里我们不需要该方法。这个对象看起来很直接，但是我们如何实现它呢？ D2LLinux联盟
D2LLinux联盟
首先，我们为对象编写一个构造函数，这在JavaScript中仅仅是一个函数D2LLinux联盟
D2LLinux联盟
jsEvent.EventRouter=function(el,eventType){ D2LLinux联盟
D2LLinux联盟
this.lsnrs=new Array(); D2LLinux联盟
D2LLinux联盟
this.el=el; D2LLinux联盟
D2LLinux联盟
el.eventRouter=this; D2LLinux联盟
D2LLinux联盟
el[eventType]=jsEvent.EventRouter.callback; D2LLinux联盟
D2LLinux联盟
} D2LLinux联盟
D2LLinux联盟
我们定义了监听器函数的数组（最初它是空的），保存了一个到DOM元素的引用，并且给DOM元素添加了一个到这个对象的引用。
然后我们分配一个EventRouter类的静态函数，简单地称作callback，作为事件处理函数。记住在JavaScript中，方括号和点记号是等同的，这意味着： D2LLinux联盟
D2LLinux联盟
el.onmouseover D2LLinux联盟
D2LLinux联盟
和 D2LLinux联盟
D2LLinux联盟
el['onmouseover'] D2LLinux联盟
D2LLinux联盟
是相同的。为使用方便，我们将属性名称作为参数传递进来。这与Java或者.NET语言的反射是类似的。 D2LLinux联盟
D2LLinux联盟
然后，让我们看看callback： D2LLinux联盟
D2LLinux联盟
jsEvent.EventRouter.callback=function(event){ D2LLinux联盟
D2LLinux联盟
var e=event || window.event; D2LLinux联盟
D2LLinux联盟
var router=this.eventRouter; D2LLinux联盟
D2LLinux联盟
router.notify(e) D2LLinux联盟
D2LLinux联盟
} D2LLinux联盟
D2LLinux联盟
因为这是一个回调函数，函数上下文是触发事件的DOM节点，而不是路由器对象。我们使用前面提到的后端对象模式得到已经附加在 DOM 节点上的EventRouter的引用，然后调用路由器的notify()方法，将事件对象作为参数传递进来。
然后我们看看下面的广为流传的来自csdn的文档:
给对象增加一个简单的自定义事件机制
By: 泣红亭 D2LLinux联盟
<html> D2LLinux联盟
D2LLinux联盟
<head> D2LLinux联盟
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> D2LLinux联盟
<title>给对象增加一个简单的自定义事件机制</title> D2LLinux联盟
</head> D2LLinux联盟
D2LLinux联盟
<body> D2LLinux联盟
<script type="text/javascript"> D2LLinux联盟
function MyObject() D2LLinux联盟
{ D2LLinux联盟
// 保存事件监听函数数组 D2LLinux联盟
this.RunEventListeners = new Array(); D2LLinux联盟
} D2LLinux联盟
D2LLinux联盟
MyObject.prototype.Run = function() D2LLinux联盟
{ D2LLinux联盟
// 在这里实现Run方法的代码并且触发 D2LLinux联盟
// 下边是激活onrun事件 D2LLinux联盟
for(var i = 0; i < this.RunEventListeners.length; i++) D2LLinux联盟
this.RunEventListeners[i](this); D2LLinux联盟
} D2LLinux联盟
D2LLinux联盟
MyObject.prototype.AddEvent = function(name, listener) D2LLinux联盟
{ D2LLinux联盟
switch(name.toLowerCase()) D2LLinux联盟
{ D2LLinux联盟
case "onrun": D2LLinux联盟
this.RunEventListeners[this.RunEventListeners.length] = listener; D2LLinux联盟
break; D2LLinux联盟
// 还可以在这里增加各种事件，最好判断一下该listener是事已经被添加，以免重复执行，不过这里省了 D2LLinux联盟
default: D2LLinux联盟
break; D2LLinux联盟
} D2LLinux联盟
} D2LLinux联盟
D2LLinux联盟
function OnRun1(sender) D2LLinux联盟
{ D2LLinux联盟
alert("已经执行了OnRun1事件") D2LLinux联盟
} D2LLinux联盟
D2LLinux联盟
function OnRun2(sender) D2LLinux联盟
{ D2LLinux联盟
alert("已经执行了OnRun2事件"); D2LLinux联盟
} D2LLinux联盟
D2LLinux联盟
var myobj = new MyObject(); D2LLinux联盟
D2LLinux联盟
// 添加两个监听函数 D2LLinux联盟
myobj.AddEvent("onrun", OnRun1); D2LLinux联盟
myobj.AddEvent("onrun", OnRun2); D2LLinux联盟
D2LLinux联盟
D2LLinux联盟
// 执行Run方法，如无例外，会触发onrun事件 D2LLinux联盟
myobj.Run(); D2LLinux联盟
</script> D2LLinux联盟
</body> D2LLinux联盟
D2LLinux联盟
</html> D2LLinux联盟
D2LLinux联盟
D2LLinux联盟
By: 月影 D2LLinux联盟
<html> D2LLinux联盟
D2LLinux联盟
<head> D2LLinux联盟
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> D2LLinux联盟
<title>给对象增加一个简单的自定义事件机制</title> D2LLinux联盟
</head> D2LLinux联盟
D2LLinux联盟
<body> D2LLinux联盟
<script type="text/javascript"> D2LLinux联盟
Function.prototype.DECLEAR_EVENT = function(evt_type) D2LLinux联盟
{ D2LLinux联盟
var args = arguments; D2LLinux联盟
var method = this; D2LLinux联盟
var type = evt_type; D2LLinux联盟
D2LLinux联盟
return function() D2LLinux联盟
{ D2LLinux联盟
method.apply(this, args); D2LLinux联盟
for(each in this.EventListeners[type]) D2LLinux联盟
this.EventListeners[type][each](this); D2LLinux联盟
} D2LLinux联盟
} D2LLinux联盟
D2LLinux联盟
function MyObject() D2LLinux联盟
{ D2LLinux联盟
// 保存事件监听函数数组 D2LLinux联盟
this.EventListeners = new Array(); D2LLinux联盟
} D2LLinux联盟
D2LLinux联盟
MyObject.prototype.Run = function() D2LLinux联盟
{ D2LLinux联盟
// 在这里实现Run方法的代码 D2LLinux联盟
D2LLinux联盟
}.DECLEAR_EVENT("onrun"); //onrun事件声明 D2LLinux联盟
D2LLinux联盟
MyObject.prototype.AddEvent = function(name, listener) D2LLinux联盟
{ D2LLinux联盟
this.EventListeners[name]? D2LLinux联盟
this.EventListeners[name].push(listener):this.EventListeners[name]=[listener]; D2LLinux联盟
} D2LLinux联盟
D2LLinux联盟
function OnRun1(sender) D2LLinux联盟
{ D2LLinux联盟
alert("已经执行了OnRun1事件") D2LLinux联盟
} D2LLinux联盟
D2LLinux联盟
function OnRun2(sender) D2LLinux联盟
{ D2LLinux联盟
alert("已经执行了OnRun2事件"); D2LLinux联盟
} D2LLinux联盟
D2LLinux联盟
var myobj = new MyObject(); D2LLinux联盟
D2LLinux联盟
// 添加两个监听函数 D2LLinux联盟
myobj.AddEvent("onrun", OnRun1); D2LLinux联盟
myobj.AddEvent("onrun", OnRun2); D2LLinux联盟
D2LLinux联盟
D2LLinux联盟
// 执行Run方法，如无例外，会触发onrun事件 D2LLinux联盟
myobj.Run(); D2LLinux联盟
</script> D2LLinux联盟
</body> aspxuexi.com asp学习网D2LLinux联盟
D2LLinux联盟
</html> D2LLinux联盟
D2LLinux联盟
By: DSONet D2LLinux联盟
<SCRIPT LANGUAGE="JavaScript"> D2LLinux联盟
<!-- D2LLinux联盟
function EventTarget(){ D2LLinux联盟
this._listeners={}; D2LLinux联盟
this.addEventListener=function(sType,fnHandle){ D2LLinux联盟
if ('function'!=typeof fnHandle){return;} D2LLinux联盟
var ls=this._listeners[sType]; D2LLinux联盟
if(!ls)ls=this._listeners[sType]={}; D2LLinux联盟
ls[EventTarget.toHashCode(fnHandle)]=fnHandle; D2LLinux联盟
}; D2LLinux联盟
this.dispatchEvent=function(sType){ D2LLinux联盟
if(!this._listeners[sType])return; D2LLinux联盟
for(var hc in this._listeners[sType]){ D2LLinux联盟
this._listeners[sType][hc].call(this); D2LLinux联盟
} D2LLinux联盟
}; D2LLinux联盟
} D2LLinux联盟
EventTarget.toHashCode=function(o){if(o._hashCode)return o._hashCode;return o._hashCode="_"+(EventTarget._hashCodeCounter++).toString(32);}; D2LLinux联盟
EventTarget._hashCodeCounter=0; D2LLinux联盟
function TestEvent(){ D2LLinux联盟
EventTarget.call(this); D2LLinux联盟
this.test=function(){ D2LLinux联盟
alert('test方法开始执行'); D2LLinux联盟
this.dispatchEvent('onTest'); D2LLinux联盟
alert('test方法执行完毕'); D2LLinux联盟
}; D2LLinux联盟
}; D2LLinux联盟
var test=new TestEvent(); D2LLinux联盟
test.addEventListener('onTest',function(){alert('监听到test事件');}); D2LLinux联盟
test.test(); D2LLinux联盟
var test2=new TestEvent(); D2LLinux联盟
test2.test(); D2LLinux联盟
//--> D2LLinux联盟
</SCRIPT>
在例如一个例子:
function addItem() { D2LLinux联盟
var oDiv = document.createElement("div"); D2LLinux联盟
oDiv.innerHTML = "Sample"; D2LLinux联盟
oDiv.onclick = removeItem; D2LLinux联盟
document.body.appendChild( oDiv ); D2LLinux联盟
oDiv = null; D2LLinux联盟
}
D2LLinux联盟
function removeItem(e) { D2LLinux联盟
var oDiv = window.event.srcElement || e.target; D2LLinux联盟
oDiv.parentNode.removeChild( oDiv ); D2LLinux联盟
oDiv = null; D2LLinux联盟
}
下面是一个更实际的例子：
用onunload事件监听google adsense点击
通过iframe的onfocuse事件监听adsense的点击事件，存在误统计右键点击的问题，用onunload事件，监听就不会存在这个问题了。 D2LLinux联盟
D2LLinux联盟
firefox中无法获取window.focus属性， D2LLinux联盟
D2LLinux联盟
In Firefox, this can be changed via "Tools → Options → Web D2LLinux联盟
Features → Enable JavaScript / Advanced → Allow scripts to change status D2LLinux联盟
D2LLinux联盟
打开这个似乎只是可以设定focus属性，还是不能获取。 D2LLinux联盟
<script> D2LLinux联盟
if( window.addEventListener ) { D2LLinux联盟
window.addEventListener( 'unload', test, false ); D2LLinux联盟
} else if( document.addEventListener ) { D2LLinux联盟
document.addEventListener( 'unload', test, false ); D2LLinux联盟
} else if( window.attachEvent ) { D2LLinux联盟
window.attachEvent( 'onunload', test ); D2LLinux联盟
} else { D2LLinux联盟
if( window.onunload ) { window.XTRonunload = window.onunload; } D2LLinux联盟
window.onunload = test; D2LLinux联盟
} D2LLinux联盟
function test(){ D2LLinux联盟
if(window.status.indexOf('googlesyndication') > 0){ D2LLinux联盟
alert(window.status); D2LLinux联盟
} D2LLinux联盟
} D2LLinux联盟
D2LLinux联盟
</script>
Linux联盟收集整理 ,转贴请标明原始链接,如有任何疑问欢迎来本站Linux论坛讨论
