BindAsEventListener equivalent in jQuery?

Question

I am trying to bind a click event to some element using jQuery. Using prototype I know I can do this using BindAsEventListener().

Example:

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

click(fn):

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

or if you like to define the "handler" as a named function:

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

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

Answer 2

The exact equivalent is the $().bind() function:

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

Answer 3

Bind documentation.

You will want to use this example: In your sample you use an object in your event handler. This code will allow you to bind the object and get it back as part of the event. It is a little more convenient than creating the closure.

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

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

Bind works with almost every event you need: Possible event values: blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error

Answer 4

I assume that you are still using prototype, and have added the jQuery no conflict so that $() is a prototype method and $j() is a jQuery method.

You only need to make a change on your init method.

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

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

Answer 5

altCognito wrote:

This code will allow you to bind the object and get it back as part of the event. It is a little more convenient than creating the closure.

The original poster is obviously porting from prototype to jQuery. It will not be more convenient for them to have to rewrite all event handlers to use event.something.else instead of this.

Answer 6

To do it without leveraging prototype functions, you can use jQuery.proxy

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