Events in JS

Javascript interaction with HTML is handled through events that occur when the user or the browser manipulates a page.

Anything whether it is clicking a mouse button, pressing any keyboard button or when the page loads, which puts any changes in the web page. That can be called as an event.

Now, What's the point of having these anyway?

What is the use of an event?

Let me put an example, to answer these two questions.

If you are visiting some web page or a site. let's say Amazon or any other e-commerce website, let's say. You want to register yourself as a customer. So, what you'll do? You would simply click on the register or sign-up button which will pop up the sign-up window or form and you'll fill in the details and you are good to go.

Here, The developer of the website must have used the click event on the button to pop up the sign-up window. as clicking the button is an event itself.

Well, This can be one of the many examples.

So, The developers use this kind of event to inject JS-coded responses and manipulate the web page acc. to the needs.

There are 8 types of events in JS. They are:

• User Interface Events

• Focus and Blur Events

• Mouse Events

• Keyboard Events

• Form Events

• Mutation Events and Observers

• HTML5 Events

• CSS Events

In this article, We'll be discussing mouse and keyboard Events. As you might be using them majorly in the development.

First let's know, How you'll be using those events. You can handle events both in HTML and JS respectively.

• In HTML

<button id="btn" onClick="anyFunction">Click Me!</button>

• In JS

const btn = document.querySelector("#btn");

function CallBack-Function() {
    // Your Code Here
}

btn.addEventListener('event-name', CallBack-Function);

In JS, first, you have to grab that element and you have to use the addEventListener method which has two parameters first is the name of the event and the second is the callback function that you want to execute on that particular event.

1. Mouse Events

The events which are fired whether it is on the movement of the mouse or clicking of the mouse button are known as Mouse Events.

Let's see an example of a simple click event.

• In HTML

<button id="btn" onclick="Hello()">click Me!</button>

• In JS

const btn = document.querySelector("#btn");

function Hello() {
    alert("Hello World");
}

btn.addEventListener('click', Hello());

1. Keyboard Events

Events which are fired when the user presses or releases a key on the keyboard.

Their usage is same as shown in the example above.