Jquery - Difference Between Event.target And This Keyword?

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); al

Solution 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:

<styletype="text/css">div { width: 200px; height: 100px; background: #AAAAAA; }​</style><div><inputtype="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.

​

Solution 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>

Solution 3:

Crispy answer

this gives you the reference of the DOM element where the event is actually attached.

event.target gives you the reference of the DOM element where the event occurs.

Long answer

jQuery(document).ready(function(){
    jQuery(".outer").click(function(){
	   var obj = jQuery(event.target);
	   alert(obj.attr("class"));
    })
})

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="outer">
        Outer div starts here
	<divclass="inner">
	    Inner div starts here
	</div></div>

When you run the above code snippet you will see that event.target is alerting the class name of the div that is actually clicked.

However this will give the reference of the DOM object on which the click event is bind. Check the below code snippet to see how this works, always alerting the class name of the div on which the click event is bind even if you click the inner div.

jQuery(document).ready(function(){
  jQuery(".outer").click(function(){
    var obj = jQuery(this);
    alert(obj.attr("class"));
  })
})

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="outer">
    Outer div starts here
    <divclass="inner">
	    Inner div starts here
    </div></div>