In order to build interactive web applications, you need to learn how to use JavaScript events. Let us see exactly how you can create them step-by-step.
You start by selecting the desired event type and adding a callback. After that you can focus on handling clicks, keystrokes, scrolling, and other events.
For instance, to activate a button click, you can insert the following code:
the document.querySelector ('button')
.addEventListener ('click', () = > {
console. log ('button pressed');
});
This particular code calls the DOM, searches the specified item, and adds a click event handler with the addEventListener.
As stated in the DOM documentation, target.addEventListener should go by the following parameters:
target.addEventListener(type, listener [, options]); target.addEventListener(type, listener [, useCapture]); target.addEventListener(type, listener [, useCapture, wantsUntrusted ]); // only in Gecko/Mozilla browsers
The listener parameter here can be handled as an object as well as a function. And addEventListener accepts the following: event type, callback, and the options/useCapture parameter.
Managing JavaScript Events with addEventListener and EventListener
MDN provides the following description of listener:
listener can be an object that implements the EventListener interface or a JavaScript function
In a pre-HTML5, earlier version of the DOM event specification, the EventListener interface is included with the objects contains the handeEvent method. Both can be used with addEventListener in the following manner:
// 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 code sample represents the EventHandler class. Initialized event handler objects here could be passed to addEventListener. The handler counts the number of events of the selected type. You can try this code on CodePen as well since all information is located in the object itself and the code shall work fine even without external variables. This is much prefered pattern by many as it is useful for handling sequential events.
MDN also states that the EventListener interface is supported by most browsers and you can easily pass objects for execution to addEventListener.
Let us illustrate with the following example how exactly they would be transferred:
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')
);
Here, the constructor of the MyComponent class treats the DOM element as an argument and itself adds/removes its JavaScript event handlers. The class additionally implements the EventListener interface so that you can pass this to addEventListener.
Conclusion
In order for your interface to be interactive and flexible at the same time, it is essential not only to use JavaScript events, but also to bear in mind the size of the click area.
