To create interactive web applications, you need to use JavaScript events. How do they work?
You specify the desired event type, add a callback, and now you can handle clicks, keystrokes, scrolling, and other events.
For example, to process a button click, you can use the following code:
the document.querySelector ('button')
.addEventListener ('click', () = > {
console. log ('button pressed');
});
This code accesses the DOM, finds the specified element, and adds a click event handler using the addEventListener.
According to the DOM documentation, target.addEventListener can have the following parameters:
target.addEventListener(type, listener [, options]); target.addEventListener(type, listener [, useCapture]); target.addEventListener(type, listener [, useCapture, wantsUntrusted ]); // only in Gecko/Mozilla browsers
addEventListener accepts: event type, callback, and the options/useCapture parameter. For more information about possible parameter values, see the JavaScript event documentation.
The listener parameter can be an object as well as a function.
Handling JavaScript events with addEventListener and EventListener
MDN describes listener like this:
listener can be an object that implements the EventListener interface or a JavaScript function
In an earlier version of the DOM event specification (before HTML5), the EventListener interface is described. The objects that implement it must contain the handeEvent method. They can be used with addEventListener.
// class that implements
/ / the `EventListener`interface
EventHandler class {
constructor () {
this.eventCount = 0;
}
handleEvent() {
this.eventCount++;
console. log ('Event handled by $ {this. eventCount} times`);
}
}
the document.querySelector ('button')
. addEventListener ('click', new EventHandler());
This is the code of the EventHandler class. Initialized event handler objects can be passed to addEventListener. The handler counts the number of events of the desired type. Try this code on CodePen. All information is stored in the object itself and the code works without external variables. I like this pattern, it is useful for working with sequential events.
MDN says that the EventListener interface is supported by most browsers and you can safely pass objects implementing it to addEventListener.
When should they be transferred? Let’s explain with an example:
class MyComponent {
constructor (el) {
this.el = el
this.el.addEventListener('click', this)
}
handleEvent (event) {
console.log('my component element is clicked')
}
destroy () {
this.el.removeEventListener('click', this)
}
}
const component = new MyComponent(
document.querySelector('button')
);
The constructor of the MyComponent class takes the DOM element as an argument and itself adds/removes its JavaScript event handlers. The class implements the EventListener interface, and therefore you can pass this to addEventListener.
Conclusion
In order for your interface to be user-friendly and interactive, it is important not only to use JavaScript events, but also to take into account the size of the click area. Read more about how to help the user not to miss, read the article: “I wanted to click, but I couldn’t: how to properly adjust the size of the click area”.
