bindAsEventListener的用法

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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],这有点投机啦。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值