EventListener
The EventListener
interface represents an object that can handle an event dispatched by an EventTarget
object.
Note: Due to the need for compatibility with legacy content, EventListener
accepts both a function and an object with a handleEvent()
property function. This is shown in the example below.
Properties
This interface neither implements, nor inherits, any properties.
Methods
This interface doesn't inherit any methods.
EventListener.handleEvent()
-
A function that is called whenever an event of the specified type occurs.
Example
HTML
<button id="btn">Click here!</button>
<p id="funcOutput"></p>
<p id="handleEvtOutput"></p>
JavaScript
const buttonElement = document.getElementById('btn');
const funcOutput = document.getElementById('funcOutput');
const handleEvtOutput = document.getElementById('handleEvtOutput');
// Add a handler for the 'click' event by providing a callback function.
// When the element is clicked, the output "Element clicked through function!"
// will appear in the p tag with the id of "funcOut".
buttonElement.addEventListener('click', function (event) {
funcOutput.textContent = 'Element clicked through function!';
});
// For compatibility, a non-function object with a `handleEvent` property is
// treated just the same as a function itself.
// The output "Element clicked through handleEvent property!" will appear
// simultaneously in the p tag with the id of "handleEvtOutput".
buttonElement.addEventListener('click', {
handleEvent: function (event) {
handleEvtOutput.textContent = 'Element clicked through handleEvent property!';
}
});
Result
Specifications
Specification |
---|
DOM Standard # callbackdef-eventlistener |
Browser compatibility
BCD tables only load in the browser