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）方法

Answer 2

要在不利用原型函数的情况下执行此操作，可以使用jQuery.proxy

http://api.jquery.com/jQuery.proxy/

Answer 3

Bind documentation.

您将需要使用此示例：在您的示例中，您在事件处理程序中使用了一个对象。此代码允许您绑定对象并将其作为事件的一部分返回。它比创建闭包更方便。

function Something() {
  this.myData = "fun";
  this.handleClick = function(event) {
    alert(event.data.myData);
  }
}

var something = new Something();
$('h2').bind("click", something, something.handleClick);

Bind适用于您需要的几乎所有事件：可能的事件值：模糊，聚焦，加载，调整大小，滚动，卸载，前载，单击，dblclick，mousedown，mouseup，mousemove，mouseover，mouseout，mouseenter，mouseleave，change，选择，提交，keydown，按键，键盘，错误

Answer 4

click(fn)：

$("#someElement").click( function(event) {
     alert("Hi you clicked me!");
});

或者如果您想将“处理程序”定义为命名函数：

function someElementClicked(event) {
     alert("Hi you clicked me!");
};

$("#someElement").click(someElementClicked);

Answer 5

确切的等价物是$（）。bind（）函数：

$("#elem").bind('click', function() {
  //do stuff here
});

在jQuery中BindAsEventListener等价？

5 个答案: