Getting the target of the current bubbling phase when using event delegation

Question

I have a div that contains some buttons and I want to attach an event listener to the div that listens for events that bubble up from the buttons inside of it.

The problem I am running into is that the value of event.currentTarget does not appear to match what the docs say it should.

Consider the following code:

$('.container').on('click', '.myButton', function(event) {
  console.log("event.currentTarget:");
  console.log(event.currentTarget);

  console.log("event.target: ");
  console.log(event.target);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="container">
  <button class="myButton">Click Me</button>
</div>

I am using jquery 1.8.3

event.currentTarget should be the container div, but it is being set to the button inside it instead.

How can I get around this. Is this a known bug or am I doing something wrong?

Not quite. The event is delegated to `.myButton`, so the current target IS the button. — Sterling Archer, May 20 '15 at 17:21
You want to get the delegate target: `event.delegateTarget` https://api.jquery.com/event.delegateTarget/ `Description: The element where the currently-called jQuery event handler was attached` — A. Wolff, May 20 '15 at 17:27

Dhiraj · Accepted Answer · 2015-05-20T17:28:10.633

I think it is working as it is supposed to.

In the mentioned case, event is directly attached to the button, hence currentTarget and target will always be the same.

$('.container').on('click', '.myButton', function(event) {}); does not mean that the event is attached to the div. It is just delegating the event. Meaning, the event will bubble up only till .container and the event is still attached ONLY to .myButton

Case 1: If an event is attached to the div

if the button is clicked then the currentTarget would be button and target would be the div.
if div is clicked currentTarget would be div and target would also be div

Example

$('.container').on('click', function(event) {
  console.log(event.currentTarget);
  console.log(event.target);
});

div{
  border: 1px solid;
  width: 150px;
  height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="container">
  <button class="myButton">Click Me</button>
  Click me
</div>

Case 2: (Your case) If event is attached to button then currentTarget and target would be button always

$('.container').on('click','.myButton', function(event) {
  console.log(event.currentTarget);
  console.log(event.target);
});

div{
  border: 1px solid;
  width: 150px;
  height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="container">
  <button class="myButton">Click Me</button>
  Click me
</div>

score 1 · Answer 2 · answered May 20 '15 at 17:21

According to http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-currentTarget

event.currentTarget is used to indicate the EventTarget whose EventListeners are currently being processed. This is particularly useful during capturing and bubbling.

So according to your code it is doing what it is supposed to. To get the parent you can try var $target = $('event.target').parent();

score 1 · Answer 3 · edited May 20 '15 at 17:34

1

It's because you are using jQuery and not native JavaScript.

function testClick(e){
  console.log("event.currentTarget:");
  console.log(event.currentTarget);

  console.log("event.target: ");
  console.log(event.target);
}
$('.container').on('click', '.myButton', testClick);
document.getElementsByClassName('container')[0].addEventListener("click", testClick);

edited May 20 '15 at 17:34

A. Wolff

74,033
9
94
155

answered May 20 '15 at 17:26

Hoyen

2,511
1
12
13

Tim Vermaelen · Answer 4 · 2015-05-20T17:36:03.233

0

Your assumption to have the container div selected is wrong with your event binding.

If you would do the following:

$('.container').on('click', function(){/**/});

Then your event.currentTarget would be the container. The event.target can be anything below.

If you add the selector .myButton, events are delegated to that selector but not to the '.container'.

edited May 20 '15 at 17:36

answered May 20 '15 at 17:20

Tim Vermaelen

6,869
1
25
39

This removes the event from the button and makes the entire div a click event. – Sterling Archer May 20 '15 at 17:22
to make a point, yes! I'm also making that same point so no clue where you getting at. – Tim Vermaelen May 20 '15 at 17:22
It means that the event is supposed to be on the button, so the answer should be how to grab the container div as the target with the button having the event. This doesn't answer the question at hand. Make a point, yes, but not as an answer :) – Sterling Archer May 20 '15 at 17:23

Getting the target of the current bubbling phase when using event delegation

4 Answers4