bindAsEventListener的用法

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;
  ......
}

 

 

注意两点：

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