Event and Event Handlers

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.

The process of Event Handling is the marriage of HTML and JavaScript. JavaScript can almost do anything on its own without HTML, hence the marriage. Let’s take a look at keywords that are important in the discussion of this topic.

Event: This is the state change when a user manipulates the website or application through a click or other form of the event handler. In a simpler explanation, it’s the changes that take place after a user does something on the web app.

Event Handler: This is part of the HTML that carries the code to effect the changes. The JavaScript code here is the big actor to effect that change. It carries the code and dictates what event should take place.

There are 4 major HTML events:

1. Mouse Events
2. Keyboard Events
3. Form Events
4. Window Events

There are so many types of Events, but we will take a deep dive into some of the most used Event Handlers and how they are used to help us gain more understanding of the topic.

There are 2 ways to listen to an event.

1. AddEventListener
2. Inline events.

onclick: This is the most commonly used event among the numerous event forms there are. The click of the button or part of the element triggers an event. Let’s create a div, and use it to practice our events. We will be using the AddEventListener method of listening to events.

This is our HTML

<div>
            <h3 class="event-text">This is a div for event handling</h3>
            <button class="event-btn">Click Me</button>
        </div>

This is our JavaScript that links the HTML code to the JavaScript DOM and then handles our event.

const eventButton = document.querySelector('.event-btn')
const eventText = document.querySelector('.event-text')
eventButton.addEventListener('click', () => {
    eventText.textContent = 'I have changed the state of the event'
})

This is the output of our original code, without having clicked the Button yet.

From the code above, we linked our button to the JavaScript DOM through its class name ‘event-btn’. Also, we linked our Text to the JavaScript DOM through its class name ‘event-text’. We then used our Event Listener to perform the CLICK event that will change the text in our h3 from the original text ‘This is a div for event handling’ to our new text ‘I have changed the state of the event.’ using the textContent method in our HTML DOM. For more in-depth knowledge about HTML DOM, check out my article JAVASCRIPT AND THE DOM.

This will be our new output after clicking the Button.

onmouseover: In this event type, the event is triggered when the mouse hovers on top of the element that will affect the event.
Using the same code as above, we will only tweak the event type to achieve our onmouseover result. This time around, we will be listening to the event using the Inline as opposed to the AddEventListener event.

<div> <h3 class="event-text">This is a div for event handling</h3> <button onmouseover="handleEvent()">Click Me</button> </div>

This is what our JavaScript code will look like now since we are using the inline event type of event listening.

const handleEvent = () => { eventText.textContent = 'I have changed the state of the event' }

You can try it out on your side, and you would see the text changing state.

onload: This event is triggered when the webpage loads completely. The event can be an image, an API etc.

onmouseout: This event is the opposite of onmouseover. The event is triggered when the mouse moves away from the element.

mousedown: This event is triggered when the mouse is pressed over the element.

mouseup: It’s the opposite of mousedown. The event is triggered when the mouse is released over the element.

There are over 20 other event types and you can check out the long list at www.w3schools.com.

I hope this tutorial has been helpful. If Yes, you can like and follow me.

Thanks and have a great weekend.