bindAsEventListener的用法

最新推荐文章于 2011-12-17 00:28:00 发布

最新推荐文章于 2011-12-17 00:28:00 发布 · 227 阅读

文章标签：

#prototype #jQuery #ViewUI

javascript 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了Prototype框架中事件绑定的方法bindAsEventListener的使用技巧，通过具体示例展示了如何为DOM元素绑定事件处理函数，并传递参数。特别关注了this上下文的问题及解决办法。

2009-6-8号更新：

对于jquery，绑定事件的代码为：

$('#level').bind('change', this, function(e){e.data.changeCity(e)});
//changeCity 为对象的方法

------------------------------------------------------------

http://www.prototypejs.org/api/function/bindAsEventListener

这是prototype的文档。

下面看文档的例子：

var obj = { name: 'A nice demo' };

function handler(e) {
  var tag = Event.element(e).tagName.toLowerCase();
  var data = $A(arguments);
  data.shift();
  alert(this.name + '\nClick on a ' + tag + '\nOther args: ' + data.join(', '));
}

Event.observe(document.body, 'click', handler.bindAsEventListener(obj, 1, 2, 3));
// Now any click on the page displays obj.name, the lower-cased tag name
// of the clicked element, and "1, 2, 3".

handler是加载的事件处理函数，当该函数带参数时，实现方法如下：

第一个参数为要加载的目标对象，以后为参数数组。在handler函数里，要把参数先格式化为数组，移除第一个（即目标对象），剩下的才是handler函数感兴趣的参数。

下面贴一段我在开发过程中，用到的方法：

function MoviePlayer(groupName, initPosLeft, btnCount) {
  ......
  var self = this;
  for(i=1; i<=this.btnCount; i++) {
    Event.observe($('player_pet_' + this.groupName + '_' + i), 'mouseover', self.changeSlide.bindAsEventListener(self, i));
    Event.observe($('player_pet_' + this.groupName + '_' + i), 'mouseout', self.startAuto.bindAsEventListener(self));
  }
}

MoviePlayer.prototype.changeSlide = function() {
  ......
  var data = $A(arguments);
  data.shift();
  this.current_id = data;
  ......
}

注意两点：

由于加载的事件函数是当前对象的某个方法，this不能直接出现在prototype封装的observe方法里，否则，this会被认为是Event的，用“var self = this；”来实现；
由于只有一个参数，再shift()掉第一个元素后，直接将data作为一个数字来处理，而不是data[0]，这有点投机啦。