Jquery get the actual control that fired the event.

Question

I have a following html:-

<button type="button" class="btn-add">
  <i class="some-icon"></i>
</button>

which creates a nice fancy button with an icon

I bound an event on the button click:-

function (e) {
  console.log($(e.target));
}

now when i click on the center of the button the output of the above javascript is <i> element because of e.target. Is there any other way to get the actual control that fired this event, in this case the <button> ?

Answer 1

Read this Difference between target and currentTarget

Here is your solution: Fiddle link

$('.btn-add').click(function(e) {
    alert(e.currentTarget.tagName);
});

Answer 2

You can use either this or e.currentTarget

$('button').click(function(e){
    console.log(e.target);
    console.log(this);
    console.log(e.currentTarget);
})

Demo: Fiddle