Эквивалент BindAsEventListener в jQuery?

Question

Я пытаюсь привязать событие щелчка к некоторому элементу, используя jQuery. Используя прототип, я знаю, что могу сделать это, используя 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( eventType [, eventData], handler(eventObject) );

Применительно к вашему коду с использованием анонимной функции это разрешается до:

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

В этом случае мы связываем событие 'keyup' с текстовыми элементами, передаем ссылку this как eventData, а затем в функции-обработчике мы ссылаемся на eventData (this) с помощью event.data для выполнения this.addResult (событие) способ.

Answer 2

Чтобы сделать это без использования функций прототипа, вы можете использовать jQuery.proxy

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

Answer 3

Связующая документация.

Вы захотите использовать этот пример: в вашем примере вы используете объект в вашем обработчике событий. Этот код позволит вам связать объект и вернуть его как часть события. Это немного удобнее, чем создание замыкания.

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

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

Привязка работает практически с каждым необходимым событием: Возможные значения события: размытие, фокус, загрузка, изменение размера, прокрутка, выгрузка, перед загрузкой, щелчок, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change выбрать, отправить, нажатие клавиши, нажатие клавиши, нажатие клавиши, ошибка

Answer 4

Точным эквивалентом является функция $ (). Bind ():

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

Answer 5

нажмите (сноска)

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

или если вы хотите определить «обработчик» как именованную функцию:

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

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