This is my first article and I want to use the medium to talk about event listeners in JavaScript. Event listeners is like the heart of JavaScript, without event listeners, most web pages will be static and non-interactive. Event listeners is one of the most important features that JavaScript uses to create interactivity in a web page.
Let’s work through what event listener is, how they work, their importance and how to use them respectively.
An event is any action that happens in the web page like clicking a button, typing in a given space, dragging and dropping a file or an item, submitting a form, etc …. when these actions occur, JavaScript can detect and react to them.
An event listener is a JavaScript function that waits and listen for an event to occur and then run the functions is that event. The most common way to handle events in JavaScript is through the addEventListener () method.
Types of events in JavaScript are:-
- The click event
- Change
- Input
- Mousemove
- Keypress like the esc key
- Double click and so on Another key point to note in event listener is the event.preventDefault(). The preventDefault() method is most useful in situations where the default behavior of an HTML element interferes with the desired user experience. For example when we are trying to submit an empty form using HTML, the whole page refreshes, but the preventDefault() method is used to stop pages from refreshing. In conclusion, mastering event listeners is essential for any JavaScript developer —and as you continue building projects, you’ll see them everywhere and how important they are in building web pages.
In summary, events are the reason why you find a website or an application interesting to use. Events are the interactivity that occurs on a website when you click a button, press a keyboard, or mouse over code and the state changes when you use the window object to resize your browser; Events are everything and more in JavaScript. Events are the major reason between a static website and a dynamic one. A static website or application is one just as the name implies, static, uneventful and dry. Static websites are just there to display information about a product, organization, expertise etc. A dynamic application on the other hand shows more than just display information. They collect data from users, and allow users to send information about their requests to the organization or give a review about a product; they are dynamic.
Top comments (1)