Tutorial :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;  }};  


Solution:1

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.

Quick Answer

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;            var handler = function(event){ event.data.addResult(event) };            $j(this.txtOneId).bind('keyup', this, handler);          $j(this.txtTwoId).bind('keyup', this, handler);      }  

Explanation

With Prototype you used the bindAsEventListener function so that the this reference will be available when the event is received.

For jQuery you can pass this event data with the bind method using the following syntax (from jquery api):

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

Applied to your code, with the use of an anonymous function, this resolves to:

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

In this case we bind the 'keyup' event to the text elements, pass the this reference as eventData and then in the handler function we reference the eventData (this) with event.data to execute the this.addResult(event) method.


Solution:2

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

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


Solution: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


Solution:4

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);  


Solution:5

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

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

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »