Event.observe 附给该事件所要促发的方法 Event.stopObserving 解除该事件上的方法 对于以下代码: var ClassA = Class.create(); Event.observe($(’span’),’click’,this._handlerB); }, _handlerA : function(){ _handlerB : function(){ stopObserving : function(){ Event.stopObserving($(’span’),’click’,this._handlerB); } 正常使用时: var ins = new ClassA(); ins.observe(); 之后点击id=”span”的标签之后会正常调用ins._handlerA/B两个方法,接着执行: ins.stopObserving()方法之后,奇怪的现象发生了,会发现ins._handlerA依旧执行,也就是说并没有将原本hook到span上面的onclick handler A给取消掉。 原因是:对于 Event.observe($(’span’),’click’,this._handlerA.bind(this)); 这一行来说,this._handlerA.bind(this)是一个anonymous function,并没有一个确定的pointer指向这个function,所以当执行 Event.stopObserving($(’span’),’click’,this._handlerA.bind(this)); 这一行的时候,this._handlerA.bind(this)指向另一个位置,所以并没有unhook span onclick event. 解决的办法就是对于一个需要unhook的event来说,不要使用一个anonymous function 作为其event handler. |
实例:
<script src="prototype.js"></script>
<input type="button" id="btn" value="click" />
<input type="button" id="reg" value="register" />
<input type="button" id="unreg" value="unregister" />
<div id="status"></div>
<script>
function test() {
alert("clicked");
}
Event.observe("reg", "click", function () {
Event.observe("btn", "click", test, false);
$("status").innerHTML = "event registered";
}, false
);
Event.observe("unreg", "click", function () {
Event.stopObserving("btn", "click", test, false);
$("status").innerHTML = "event unregistered";
}, false
);
</script>