EventTarget: EventTarget() constructor
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.
Note: This feature is available in Web Workers.
The EventTarget() constructor creates a new EventTarget object instance.
Note:
It is fairly rare to explicitly call this constructor. Most of the time, this constructor is used inside the constructor of an object extending the EventTarget interface, using the super keyword.
Syntax
js
new EventTarget()
Parameters
None.
Return value
A new instance of the EventTarget object.
Examples
Implementing a counter
This example implements a Counter class, with increment() and decrement() methods. It fires a custom "valuechange" event when either of these methods is called.
HTML
html
<button id="dec" aria-label="Decrement">-</button>
<span id="currentValue">0</span>
<button id="inc" aria-label="Increment">+</button>
JavaScript
js
class Counter extends EventTarget {
constructor(initialValue = 0) {
super();
this.value = initialValue;
}
#emitChangeEvent() {
this.dispatchEvent(new CustomEvent("valuechange", { detail: this.value }));
}
increment() {
this.value++;
this.#emitChangeEvent();
}
decrement() {
this.value--;
this.#emitChangeEvent();
}
}
const initialValue = 0;
const counter = new Counter(initialValue);
document.querySelector("#currentValue").innerText = initialValue;
counter.addEventListener("valuechange", (event) => {
document.querySelector("#currentValue").innerText = event.detail;
});
document.querySelector("#inc").addEventListener("click", () => {
counter.increment();
});
document.querySelector("#dec").addEventListener("click", () => {
counter.decrement();
});
Result
Specifications
| Specification |
|---|
| DOM # ref-for-dom-eventtarget-eventtarget① |
Browser compatibility
| desktop | mobile | server | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
EventTarget() constructor
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support