Setting Up a Common Event Handler

A straightforward approach to capture the ID of an element upon clicking is to assign the same event handler function to multiple elements. For example, you can create the following HTML structure:

<button id="1">Button 1</button>

<button id="2">Button 2</button>

<button id="3">Button 3</button>

Next, the JavaScript code below sets the event handler for each button:

const handleClick = function() {

console.log(this.id, this.innerHTML);

}

document.getElementById('1').onclick = handleClick;

document.getElementById('2').onclick = handleClick;

document.getElementById('3').onclick = handleClick;

In this scenario, handleClick acts as the event handler for each button's click event. The this keyword refers to the specific button that was clicked, allowing us to access its ID and content. Consequently, clicking on each button will log its ID and label in the console:

• Clicking Button 1 logs: '1' 'Button 1'
• Clicking Button 2 logs: '2' 'Button 2'
• Clicking Button 3 logs: '3' 'Button 3'

The video "How to get an id of a clicked element[div, th, td, etc] using javascript and css - YouTube" provides further insights on this topic.

Accessing the Clicked Element via the Event Object

Another method for obtaining the ID of the clicked element is through the event object, which is passed as the first parameter to the event handler function. Consider the following HTML:

<button id="1">Button 1</button>

<button id="2">Button 2</button>

<button id="3">Button 3</button>

And the corresponding JavaScript:

const handleClick = (event) => {

console.log(event.srcElement.id);

}

window.addEventListener('click', handleClick);

By using window.addEventListener, we can attach the click event listener to the HTML document. The clicked element can be accessed using the event.srcElement property, from which we can retrieve its ID. Alternatively, we can utilize event.target:

const handleClick = (event) => {

console.log(event.target.id);

}

window.addEventListener('click', handleClick);

Both methods yield the same result. To ensure that our handler only processes button clicks, we can implement a check using the nodeName property:

const handleClick = (event) => {

if (event.target.nodeName === 'BUTTON') {

console.log(event.target.id);

}

}

window.addEventListener('click', handleClick);

This code will only execute the ID logging if a button is clicked.