Jquery-Different between event.target and this keyword?

Question

What is the different 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.

​

Answer 2

Events can be attached to any element. However, they also apply to any elements within said object.

this is the element that the event is bound to. e.target is the element that was actually clicked.

For example:

<div>
  <p>
    <strong><span>click me</span></strong>
  </p>
</div>
<script>$("div").click(function(e) {
  // If you click the text "click me":
  // e.target will be the span
  // this will be the div
});  </script>