Get element on which currently called jQuery event handler is attached

In this post I am going to explain, how we can get the element on which currently called jQuery event handler is attached using a simple Event Object called event.delegateTarget . This event object has been added to the jQuery version 1.7, so the examples below will not work with the previous versions of jQuery.

As mentioned in the delegateTarget API Documentation:

This property is most often useful in delegated events attached by .delegate() or .on(), where the event handler is attached at an ancestor of the element being processed. It can be used, for example, to identify and remove event handlers at the delegation point. For non-delegated event handlers attached directly to an element, event.delegateTarget will always be equal to event.currentTarget.

Let’s say our HTML markup is like this:

<div id="container">
    <ul id="list1">
        <li><span>Item Number One</span></li>
        <li><span>Item Number Two</span></li>
        <li><span>Item Number Three</span></li>
    </ul>
    <ul id="list2">
        <li><span>Item Number One</span></li>
        <li><span>Item Number Two</span></li>
        <li><span>Item Number Three</span></li>
    </ul>
</div>

It’s a simple HTML markup with two unordered lists having span elements inside them. But this span’s are dynamically added to the DOM. Now, let’s say we have a requirement like, when the user clicks on span’s inside the first list, then the background color of this list will change to light cyan and when the user clicks on span’s inside the second list, then the background color of this list will change to light green .

Now, we can achieve this using jQuery like this:

$('#list1, #list2').on('click', 'span', function (event) {
    var $list = $(event.delegateTarget);
    var listId = $list.prop('id');
    if(listId === 'list1'){
        $list.toggleClass('lightCyan');
    }else if(listId === 'list2'){
        $list.toggleClass('lightGreen');
    }
});

Explanation:

Code in the first line
```
$('#list1, #list2').on('click', 'span', function (event) {
```
Here, we are using the event delegation to bind the click event to all the dynamically created span elements. I have already explained about this in details in my last post named “Bind events to dynamically created elements using jQuery“. Please have a look, if you want to know more about it 😉
Code in the second line
```
var $list = $(event.delegateTarget);
```
Here, we are using the delegateTarget property of the event object. It’s mainly refers to the target of the delegation or the element on which currently called jQuery event handler is attached. So, in case the user clicks one of the span elements inside the first list, then the code $(event.delegateTarget) will give us the jQuery object of the first list list1 and when the user clicks one of the span elements inside the second list, then it will give us the jQuery object of the second list list2 .
Code in the third line
```
var listId = $list.prop('id');
```
Here, we are getting the ID of the list which we have got from the above code using the .prop() method.
Code in next few lines
```
if (listId === 'list1') {
    $list.toggleClass('lightCyan');
} else if (listId === 'list2') {
    $list.toggleClass('lightGreen');
}
```
It’s a simple if-else statement where we are checking the listId value. If it is list1 , that means that one of the span elements inside the first list have been clicked and hence we can toggle the class named lightCyan here, which is actually setting the background color as light cyan . Else if the listId value is list2 , you must have guessed it by now ;), that means that one of the span elements inside the second list have been clicked and hence we can toggle the next class named lightGreen here, which is setting the background color as light green , based on our requirement.

I just want to let you know that, we can also do the same thing in few lines of code like
```
$list.toggleClass((listId === 'list1') ? 'lightCyan' : 'lightGreen');
```
But I have used the above code to keep it simple and easy to understand for all the developers.