Is event.currentTarget always equal to $(this) in jQuery?

Question

Is this phrase always true?

$("p").click(function(event) {
  alert( event.currentTarget === this ); 
});  

Is one method preferred over the other? I like to use $(this) instead of event.currentTarget but can one do better in some conditions? Which is better? Are absolutely the same?

And another nuance - When checking on firebug console.log(this) and console.log($(this)) gives me exactly the same element. If they are the same - what is different? (since I know I can write this $(this).css('color','white') but can't write this.css('color','white')

Answer 1

Generally, yes, it will be the same. You can make it different by using $.proxy to manipulate the context, but in practice you probably never will.

$(document.body).on('click', $.proxy(function(e) {
    console.log(this);            // window
    console.log(e.currentTarget); // document.body
}, window));

As to the other question, this is a native DOM element, whereas $(this) is a jQuery object wrapping that DOM element. The jQuery wrapper means you can run jQuery functions such as css, which are not available on native DOM elements.

---

And, to answer the precise wording of your question, event.currentTarget is normally equal to this, not to $(this).

Answer 2

Part of your answer is above. I hope its clear enough.

No console.log(this) and console.log($j(this)) will not give you the same result. $(this) converts this to a jQuery Object and hence you can call .css like methods which can be called on jQuery objects($(this)) and not the HTML elements which will be this.