Recommended Free Tools
In a jQuery click handler written with a regular function, use this.id to get the ID of the element whose handler is running. If you need the ID of the element that actually originated the click, use event.target.id instead; those can differ when a user clicks a nested icon or span.
Get the ID in a direct click handler
When the handler is attached directly to the element, this refers to that element as a native DOM object. Read its id property:
$('#myButton').on('click', function (event) {
console.log(this.id);
});If you prefer a jQuery method, wrap the element first and read its ID attribute:
$('#myButton').on('click', function (event) {
console.log($(this).attr('id'));
});jQuery’s jQuery() documentation explains how to wrap a DOM element in a jQuery object. For a regular function handler, the handler element is also available as event.currentTarget; the currentTarget API page demonstrates that it matches this in this common case.
#1 Best Overall
Choose which element’s ID you need
“Clicked element” can mean the event’s original source or the element whose handler is running. The distinction matters when clicks bubble from nested content.
| Expression | Which element it identifies | When to use it |
|---|---|---|
event.target.id |
The DOM element that initiated the event. It may be a child inside the element with the handler. | Use when you want the ID of the actual originating element. The target API documentation defines target this way. |
event.currentTarget.id |
The element currently handling the event. | Use when you want the ID of the element whose handler is executing. See the currentTarget API documentation. |
this.id |
In a regular jQuery function handler, the element whose handler is running. | Use as the concise native DOM form; it typically identifies the same element as event.currentTarget. |
$(this).attr('id') |
The ID attribute of the handler element, accessed through a jQuery object. | Use when you specifically want to call a jQuery method. |
For example, if a button contains an icon and the icon receives the click, event.target may be the icon while event.currentTarget is the button. Pick the property that matches the element whose ID your code needs.
Get the matched element’s ID with event delegation
Delegation attaches a handler to an ancestor and uses a selector to handle matching descendants as events bubble. In the example below, this and event.currentTarget identify the button matching the selector; event.target may instead be a nested child inside that button.
$('#list').on('click', 'button', function (event) {
console.log(this.id); // selector-matched button
console.log(event.currentTarget.id); // selector-matched element handling the event
console.log(event.target.id); // element that initiated the click
});Use a nearby stable ancestor as the delegation point when practical. The .on() documentation cautions that many delegated handlers placed high in the document tree can require extra selector comparisons. The jQuery Learning Center’s event delegation guide explains the pattern.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesRank #3
Use currentTarget with an arrow-function handler
Arrow functions do not define their own this, so do not rely on this.id inside an arrow handler. Use the event argument’s currentTarget instead:
$('#myButton').on('click', (event) => {
console.log(event.currentTarget.id);
});This difference comes from JavaScript’s lexical this behavior; event.currentTarget still identifies the element handling the event.
Use .on() for jQuery event binding
The jQuery Learning Center recommends .on() for event binding in jQuery 1.7 and later. The handling events guide covers the API, and the .on() API page documents direct and delegated handlers. The API lists event.target as available since jQuery 1.0, event.currentTarget since 1.3, and .on() since 1.7; its current examples load jQuery 4.0.0.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
