Events in JavaScript

Hello everyone, welcome back. In this module, I will be talking about events in JavaScript. So far we have learned many things in JavaScript like variables, data types, conditional statements, loops, etc. Now, after reading this module, you will be getting to know what Events in JavaScript are and how to use them. Let’s get started without any delay.

Events in JavaScript

An event in JavaScript is an action that is performed either by the user or the browser. JavaScript interacts with HTML with the use of the events. For example, when the user clicks on a button, a piece of information is displayed through popup boxes or some styling of the web page changes. When a web page loads, it is referred to as an event. Other examples of events are resizing and closing the window, submitting the form, pressing a key on the keyboard, etc.

Events in Javascript

Each event in JavaScript is associated with an event handler. An event handler is a JavaScript function created by the programmer, which will be executed when the event is fired. Event handlers are also known as Event Listeners. User input or actions, and browser activities may all be handled and verified via event handlers. Thus, JavaScript uses Event handlers to handle HTML events.

You can use JavaScript events in your HTML document by using the following syntax:

Syntax

  1. Using single quotes
    <element event_name=’JavaScript code’>
  2. Using double quotes
    <element event_name=”JavaScript code”>

There are a lot of events in JavaScript, but I’ll only go through a few of them.

Some basic JavaScript Events

Click Events

  1. onclick
    This event is executed when the user clicks on any HTML element i.e., html tags.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <style>
    input{
    width: 200px;
    height: 50px;
    font-size: larger;
    }
    </style>
    <body>
    <input type='button' value="Submit" onclick="showmessage()"/>
    <script>
    function showmessage()
    {
    alert('Hello!');
    }
    </script>
    </body>
    </html>
    
  2. ondblclick
    It is an event that is executed when the user double-clicks on any HTML element.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <style>
    input{
    width: 200px;
    height: 50px;
    font-size: larger;
    }
    </style>
    <body>
    <input type='button' value="Submit" ondblclick="showmessage()"/>
    <script>
    function showmessage()
    {
    alert('This is a double click!');
    }
    </script>
    </body>
    </html>
    
  3. oncontextmenu
    When a user right-clicks on an HTML element, this click event happens.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <style>
    input{
    width: 200px;
    height: 50px;
    font-size: larger;
    }
    </style>
    <body>
    <input type='button' value="Submit" oncontextmenu="showmessage()"/>
    <script>
    function showmessage()
    {
    alert("This is a contextmenu event.");
    }
    </script>
    </body>
    </html>
    

Mouse Events

  1. onmouseover
    It is a mouse event that occurs when the mouse cursor enters the HTML element.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <style>
    input{
    width: 200px;
    height: 50px;
    font-size: larger;
    }
    </style>
    <body>
    <input type='button' value="MouseOver" onmouseover="mouseOver()"/>
    <script>
    function mouseOver()
    {
    alert("This is a mouseover event.");
    }
    </script>
    </body>
    </html>
    
  2. onmouseout
    This mouse event happens when the mouse pointer exits or moves out of the HTML element.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <style>
    input{
    width: 200px;
    height: 50px;
    font-size: larger;
    }
    </style>
    <body>
    <input type='button' value="MouseOut" onmouseout="mouseOut()"/>
    <script>
    function mouseOut()
    {
    alert("This is a mouseout event.");
    }
    </script>
    </body>
    </html>
    
  3. onmousedown
    When the mouse button is pressed over an HTML element, this mouse event happens.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <style>
    input{
    width: 200px;
    height: 50px;
    font-size: larger;
    }
    </style>
    <body>
    <input type='button' value="MouseDown" onmousedown="mouseDown()"/>
    <script>
    function mouseDown()
    {
    alert("This is a mouse down event.");
    }
    </script>
    </body>
    </html>
    
  4. onmouseup
    When a user releases a mouse button over an element, this event happens.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <style>
    input{
    width: 200px;
    height: 50px;
    font-size: larger;
    }
    </style>
    <body>
    <input type='button' value="MouseUp" onmouseup="mouseUp()"/>
    <script>
    function mouseUp()
    {
    document.write("<h1>This is a mouse up event.</h1>");
    }
    </script>
    </body>
    </html>
    

Keyboard Events

  1. onkeydown
    This is a keyboard event which occurs when a user enters or presses a key.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <style>
    input{
    width: 200px;
    height: 50px;
    font-size: larger;
    }
    </style>
    <body onkeydown="KeyDown()">
    <h1>Events in JS</h1>
    <script>
    function KeyDown()
    {
    document.write("<h1>This is a key down event.</h1>");
    }
    </script>
    </body>
    </html>
    
  2. onkeyup
    When a user releases a key, this is a keyboard event that occurs.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <style>
    input{
    width: 200px;
    height: 50px;
    font-size: larger;
    }
    </style>
    <body onkeyup="KeyUp()">
    <h1>Events in JS</h1>
    <script>
    function KeyUp()
    {
    document.write("<h1>This is a key up event.</h1>");
    }
    </script>
    </body>
    </html>
    

Form Events

  1. onfocus
    This event occurs when the focus comes over the form element. With <input>, <select>, and <a>, the onfocus event is most commonly used.
  2. onblur
    This is a form event that is executed when the focus is removed from the form element. It is the opposite of an onfocus event.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
    <form>
    <label for='name'>Enter Your Name:</label>
    <input type="text" onfocus="focusEvent(this)" onblur='blurEvent(this)'/>
    </form>
    <script>
    function focusEvent(event)
    {
    event.style.background='lightblue';
    }
    function blurEvent(event)
    {
    event.style.background='yellow';
    }
    </script>
    </body>
    </html>
    
  3. onsubmit
    It is executed when the form is submitted by the user.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
    <form onsubmit="document.write(new Date());">
    <label for='name'>Enter Your Name:</label>
    <input type="text"/><br/>
    <input type="submit" value="Submit"/>
    </form>
    </body>
    </html>
    
  4. onchange
    This form event occurs when the value of a form element is modified or changed by the user. When the checked state of radio buttons and checkboxes are changed, the onchange event is triggered.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
    <input type="checkbox" onchange="document.write('<h1>You have clicked on checkbox.</h1>');"/>
    </body>
    </html>
    

Window Events

  1. onload
    This event is fired when the browser finishes loading the page, this event is fired.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body onload="fun()">
    <h1>This is a Window onload event.</h1>
    <script>
    function fun()
    {
    window.alert('Page is completely loaded.');
    }
    </script>
    </body>
    </html>
    
  2. onunload
    It is an event which is fired when the page is unloaded.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body onunload="fun()">
    <h1>This is a Window onunload event.</h1>
    <script>
    function fun()
    {
    window.alert('Page is not completely loaded.');
    }
    </script>
    </body>
    </html>
    
  3. onresize
    This window event occurs when the window of the browser has been resized by the user.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body onresize="fun()">
    <h1>Events in JS</h1>
    <script>
    function fun()
    {
    window.alert('Window resize event.');
    }
    </script>
    </body>
    </html>
    

How to combine two events in JavaScript?

We can combine two events in JavaScript by using the addEventListener() method. The addEventListener() method is used to associate an event handler with a particular element.

Syntax
Element.addEventListener(event, function, useCapture);

  • event– It is a string value that represents the name of the event.
  • function– It consists of a block of code that specifies what action or activity to be performed when the event occurs.
  • useCapture– It is an optional parameter. It takes Boolean values i.e., true or false.

Let’s see the example for combining two events in JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Combining Two Events in JavaScript.</h1>
<script>
let h1=document.getElementsByTagName('h1')[0];

h1.addEventListener('click',()=>{
h1.innerText='Event-1 Click Event';
h1.style.color='red';
});
h1.addEventListener('dblclick',()=>{
h1.innerText='Event-2 On Double Click';
h1.style.color='blue';
});
</script>
</body>
</html>

I hope this module will be beneficial for you to know about events in JavaScript. For better understanding, you should try this by yourself and also implement other events. Stay tuned with us, for more informative and valuable modules like this. Keep Practicing!