FlyingCat FlyingCat - 11 months ago 76
HTML Question

Jquery - Difference between and this keyword?

What is the difference between

Let's say I have

$("test").click(function(e) {
$thisEventOb =;
$this = this;

I know the alert will pop different value. Anyone could explain the difference? Thanks a million.

Answer Source

They will be the same if you clicked on the element that the event is rigged up to. However, if you click on a child and it bubbles, then this refers to the element this handler is bound to, and still refers to the element where the event originated.

You can see the difference here:

given this markup:

<style type="text/css">div { width: 200px; height: 100px; background: #AAAAAA; }​</style>    
    <input type="text" />

If you had this:


A click on the <input> would alert the input, then the div, because the input originated the event, the div handled it when it bubbled. However if you had this:


It would always alert the input twice, because it is both the original element for the event and the one that handled it.