Working with Event in JavaScript
We have known that JavaScript enhances the interaction of web pages and the way it does performs this interaction is through events that occur when the user or the browser manipulates a page.
When users visit a webpage, they do things like click a button or various links, bring a mouse over text and images, and so on. These are examples of what we call events in JavaScript.
Imagine you want a button to close a window, display messages to users, data to be validated or any other type of responses you want, we can use these events to execute such JavaScript-coded responses which make our web pages more interactive.
Let’s take a look at a few examples to understand working with JavaScript events
The onclick Event
This event type occurs when a user clicks on the left button of the mouse and it is the most frequently used event type.
When you click on the button, it calls the function clicked() and displays the alert “You clicked me” to the browser
The onsubmit Event
After completing your form, the next thing is to submit it, right? The onsubmit occurs when you try to submit a form.
The onmouseover event triggers when you bring your mouse over any element as if you are hovering over the element. Its opposite is the onmouseout that triggers when you move your move out from that element. Let’s see how they work.
There a lot of other event types in JavaScript such as the ondrag, focus, mousedown, etc. You can check them out here for your reference. Feel free to play around with them.
The above event type examples are called inline event handlers or event handlers HTML attributes. They are the earliest method of registering event handlers on the Web. The attribute value is literally the JavaScript code you want to run when the event occurs. However, we are advised not to use these as they are considered bad practices.
You might wonder why is it a bad practice. Firstly, is it not a good idea to mix your javascript and HTML, as it becomes hard to parse. It is a good practice to separate your JavaScript. Secondly, suppose you had 50 buttons, you would have to add 50 attributes to the file. This makes maintenance difficult.
The modern mechanism and best practice for adding event handlers is the addEventListener Method
The addEventListener Method
Event handlers help us notify our code when an event occurs. Browsers do this by allowing us to register functions as handlers for specific events. It attaches an event handler to the specific element without overwriting existing event handlers. When using the addEventListener, the JavaScript is separated from the HTML markup for better readability
Below is the basic syntax for the addEventListener method
The event describes the name of the event we want to register the handler for, the function describes the function we want to call when the event occurs. So, we could rewrite our click button to look like this:
This mechanism has a counterpart function removeEventListener() which removes a previously added event handler as shown below.
