在jQuery中BindAsEventListener等价？

Question

我试图使用jQuery将click事件绑定到某个元素.使用原型我知道我可以使用BindAsEventListener().

例:

var myObject = {

init: function(txtOneId, txtTwoId, lblResultId, ancAddId) {
    this.txtOneId = txtOneId;
    this.txtTwoId = txtTwoId;
    this.lblResultId = lblResultId;
    this.ancAddId = ancAddId;


    var addListener = this.addResult.bindAsEventListener(this);

    Event.observe(this.txtOneId, 'keyup', addListener);
    Event.observe(this.txtTwoId, 'keyup', addListener);
},

addResult: function() {

    var valueOne = $(this.txtOneId).value;
    var valueTwo = $(this.txtTwoId).value;

    if (isNaN(valueOne) || valueOne == "")
        valueOne = 0;
    else
        valueOne = parseInt(valueOne);

    if (isNaN(valueTwo) || valueTwo == "")
        valueTwo = 0;
    else
        valueTwo = parseInt(valueTwo);


    var result = valueOne + valueTwo;

    $(this.lblResultId).innerHTML = result;

    return false;
}};

Answer 1

我假设您仍在使用原型,并且添加了jQuery没有冲突,因此$()是一个原型方法,$ j()是一个jQuery方法.

快速回答

您只需要对init方法进行更改.

    init: function(txtOneId, txtTwoId, lblResultId, ancAddId) {
        this.txtOneId = txtOneId;
        this.txtTwoId = txtTwoId;
        this.lblResultId = lblResultId;
        this.ancAddId = ancAddId;

        var handler = function(event){ event.data.addResult(event) };

        $j(this.txtOneId).bind('keyup', this, handler);
        $j(this.txtTwoId).bind('keyup', this, handler);
    }

说明

使用Prototype,您使用了bindAsEventListener函数,以便在收到事件时此引用可用.

对于jQuery,您可以使用以下语法(来自jquery api)使用bind方法传递此事件数据:

.bind( eventType [, eventData], handler(eventObject) );

应用于您的代码,使用匿名函数,这解析为:

$j(this.txtOneId).bind('keyup', this, function(event){ event.data.addResult(event) });

在这种情况下,我们将'keyup'事件绑定到文本元素,将此引用作为eventData传递,然后在handler函数中我们使用event.data引用eventData(this)来执行this.addResult(event)方法.