Question

What is the difference between event.target and this?

Let’s say I have

$("test").click(function(e) {
    $thisEventOb = e.target;
    $this = this;
    alert($thisEventObj);
    alert($this);
});

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

Answer 1

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 e.target still refers to the element where the event originated.

You can see the difference here: http://jsfiddle.net/qPwu3/1/

given this markup:

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

If you had this:

$("div").click(function(e){
  alert(e.target);
  alert(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:

$("input").click(function(e){
  alert(e.target);
  alert(this);
});

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

​