jquery - BindAsEventListener 在 jQuery 中等效吗？

Question

我正在尝试使用 jQuery 将单击事件绑定(bind)到某个元素。使用原型(prototype)，我知道我可以使用 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

我假设您仍在使用原型(prototype)，并且添加了 jQuery，没有冲突，因此 $() 是原型(prototype)方法，而 $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 函数，以便在接收到事件时 this 引用可用。

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

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

应用到您的代码，并使用匿名函数，这将解析为:

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

在本例中，我们将“keyup”事件绑定(bind)到文本元素，将 this 引用作为 eventData 传递，然后在处理函数中，我们使用 event.data 引用 eventData (this) 来执行 this.addResult(event)方法。