Not a very important question, but here we go..

How do you avoid using var _this = this in jQuery event handlers? i.e. I don't like doing:

var _this = this;
$(el).click(function (event) {
  //use _this to access the object and $(this) to access dom element
});

The following 2 ways are not ideal

$(el).click($.proxy(function (event) {
  //lost access to the correct dom element, i.e. event.target is not good enough (see /)
}, this));

$(el).click({_this: this}, function (event) {
  //have access to $(this) and event.data._this, but it seems too verbose
})

Ideally I would like to do something like

$(el).click(function (event) {
  this.method(); // this is accessing the object
  event.realTarget; // this is accessing the dom element
}, this); // <= notice this

Not a very important question, but here we go..

How do you avoid using var _this = this in jQuery event handlers? i.e. I don't like doing:

var _this = this;
$(el).click(function (event) {
  //use _this to access the object and $(this) to access dom element
});

The following 2 ways are not ideal

$(el).click($.proxy(function (event) {
  //lost access to the correct dom element, i.e. event.target is not good enough (see http://jsfiddle/ne3n3/1/)
}, this));

$(el).click({_this: this}, function (event) {
  //have access to $(this) and event.data._this, but it seems too verbose
})

Ideally I would like to do something like

$(el).click(function (event) {
  this.method(); // this is accessing the object
  event.realTarget; // this is accessing the dom element
}, this); // <= notice this

• javascript
• jquery
• syntax

Share Improve this question Follow edited Oct 12, 2011 at 14:45 Karolis asked Oct 12, 2011 at 14:01 KarolisKarolis 2,95922 gold badges2424 silver badges3838 bronze badges 3

• 1 Please explain why do you thing "event.target is not good enough"? jQuery always returns own well-formed event object, with correct event.target value. – RReverser Commented Oct 12, 2011 at 14:06
• I avoid it by not typing it in the first place.... – Blazemonger Commented Oct 12, 2011 at 14:07
• When I say "not good enough" I mean this: jsfiddle/ne3n3 There is a difference between event.target and this that jQuery prepares for me in the handler – Karolis Commented Oct 12, 2011 at 14:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

http://api.jquery./event.currentTarget/ says:

"This property will typically be equal to the this of the function."

http://jsfiddle/ne3n3/2/

I'm not entirely sure I understand you right, but if what you want is a reference to the function you were in when creating the callback function you could do it like this (although it's not exactly saving you any typing):

$(el).click(function(parent) {
    return function() {
        // Use parent instead of _this
    }
}(this))

You cannot assign the variable this to both the object and the DOM element. My remendation is to assign the object to a different variable than this.

The best way to access both the object and the DOM element would be something like the following:

$(el).click($.proxy(function (event) {
  // can reference DOM element with this i.e. $(this)
  // can reference your object with the variable myObject
  //     i.e. $(this).val(myObject.data);
}, myObject));

or maybe like this:

$(el).click({myObject: this}, function (event) {
  //have access to $(this) and event.data.myObject, but it seems too verbose
});

Using a variable other than this inside the click event handling function will also make your code clearer, since most people would expect this to reference the DOM element and have nothing to do with your custom object.