EventTarget.prototype.addEventListener
Registers an event handler of a specific event type on the EventTarget
Syntax
target.addEventListener(type, listener, options?)Parameters
| Parameter | Type | Description |
|---|---|---|
| type | string | The event type to listen for |
| listener | EventListener | Function | The handler function for the event |
| options | boolean | AddEventListenerOptions | Options specifying characteristics about the event listener |
Return Value
undefined
Examples
const btn = document.querySelector('button')!
btn.addEventListener('click', () => {
console.log('Button clicked')
})const input = document.querySelector('input')!
input.addEventListener('input', (e) => {
const target = e.target as HTMLInputElement
console.log('Value:', target.value)
})const controller = new AbortController()
window.addEventListener('resize', () => {
console.log('Resized:', window.innerWidth)
}, { signal: controller.signal })
// Later: controller.abort() to removeUnderstanding EventTarget.prototype.addEventListener
The EventTarget.prototype.addEventListener method in JavaScript registers an event handler of a specific event type on the EventTarget. It belongs to the EventTarget object and is one of the most widely used methods for working with eventtarget values in modern JavaScript and TypeScript applications.
The method signature is target.addEventListener(type, listener, options?). It accepts 3 parameters: type, listener, options. When called, it returns undefined. Understanding when and how to use addEventListener() helps you write more expressive, readable code.
Common use cases for EventTarget.prototype.addEventListener include data transformation, input validation, API response processing, and building reusable utility functions. It works well alongside related methods like event-removeeventlistener, event-dispatchevent, event-preventdefault, enabling you to chain operations together for complex data manipulation pipelines.
Browser support for EventTarget.prototype.addEventListener is excellent across all modern browsers including Chrome, Firefox, Safari, and Edge. It is also fully supported in Node.js and Deno. For older environments, transpilation with Babel or a polyfill may be needed.
Browser Compatibility
Supported in all modern browsers (Chrome, Firefox, Safari, Edge) and Node.js. Part of the ECMAScript standard.
Related Methods
EventTarget.prototype.removeEventListenerRemoves an event listener previously registered with addEventListener from the EventTarget
EventTarget.prototype.dispatchEventDispatches an event to this EventTarget, invoking the affected event listeners in the appropriate order
Event.prototype.preventDefaultTells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be
More EventTarget Methods
Other methods in the EventTarget object
Related Tools
More EventTarget Methods
Explore JavaScript Methods
Browse our complete reference of 410 JavaScript methods with syntax, examples, and explanations.