target_element: This is the HTML element to which we want to attach the event handler.
- function: This function is a listener that is executed in response to a triggered event.
- useCapture: It’s an optional Boolean value which decides which event type to use (event bubbling or event capturing).
What are Event Bubbling and Event Capturing
The third optional Boolean parameter, useCapture, determines the event propagation, which decides the sequence of occurrence of an event.
If there’s <p> element inside a <div> element and the user clicks on the <p> element, which of the event of click should occur first?
In bubbling, which is represented by false, the sequence of occurrence goes from inner to outer. The <p> tag will be handled first and then the <div> tag.
Whereas, for capturing, that’s represented through true, the outermost event is handled first before the inner element. First, <div> will be handled and then the <p> tag.
Here, two parameters are passed. By clicking the button the function is called that displays the text:
<button id="try">Click here</button>
document.getElementById("text").innerText = "Welcome Back"; });