Megha Khatri's Blog
addEventListner In JS

addEventListner In JS

Megha Khatri's photo
Megha Khatri
·

3 min read

Table of contents

Events in javascript

In html,there are various events occus or represents when some activity done by user or by the browser. When javascript code include in html, js react over these events and allow some execution. This process of reacting over events is called Event Handling. and thus js handles the HTML events via Event Handlers.

Type of Event listner

Mainlly these event kistner divided into three parts mouse events, keyboard events and window events .learn in deep about the events listner :

Mouse events

when event done on mouse are known as mouse events. some of events done on mouse are:

1. onclick :-

When mouse click on an 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>
<body>
    <button onclick="clickevent()">click</button> 

<script>   
    function clickevent()  
    {  
        document.write("This is JavaTpoint");  
    }     
</script>  
</body>
</html>

2.onmouseover :-

When the cursor of the mouse comes over the 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>
<body>
    <p onmouseover="mouseoverevent()"> Keep cursor over me</p>

<script>   
    function mouseoverevent()  
    {  
        alert("This is JavaTpoint");  
    }      
</script>  
</body>
</html>

3.onmouseout :-

When the cursor of the mouse leaves an 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>
<body>
    <p onmouseout="mouseoutevent()"> Keep cursor over me</p>

<script>   
    function mouseoutevent()  
    {  
        alert("This is JavaTpoint");  
    }      
</script>  
</body>
</html>

4.onmousedown :-

When the mouse button is pressed over the 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>
<body>
    <p onmousedown="mousedownevent()"> Keep cursor over me</p>

<script>   
    function mousedownevent()  
    {  
        alert("This is JavaTpoint");  
    }      
</script>  
</body>
</html>

5. onmouseup :-

When the mouse button is released over the 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>
<body>
    <p onmouseup="mouseupevent()"> Keep cursor over me</p>

<script>   
    function mouseupevent()  
    {  
        alert("This is JavaTpoint");  
    }      
</script>  
</body>
</html>

Keyboard events :-

Event occur when press and release any key.show some keyboard events are:

1.onkeydown :-

When the user press any key ,first alert show some message if the user conform alert box after that key is printed in input types. same as ,a user remove the value same alert is show and after conferming the value is removed.

<!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>
<h2> Enter something here</h2>  
<input type="text" id="input1" onkeydown="keydownevent()"/>  
<script>  

    function keydownevent()  
    {  
        document.getElementById("input1");  
        alert("Pressed a key");  
    }  

</script>  
</body>
</html>

2. onkeyup :-

whn the user enter some value in input first write in input box and then show alert box.

<!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>
<h2> Enter something here</h2>  
<input type="text" id="input1" onkeyup="keyupevent()"/>  
<script>  

    function keyupevent()  
    {  
        document.getElementById("input1");  
        alert("Pressed a key");  
    }  

</script>  
</body>
</html>

Window events:-

1. onload :-

When the browser finishes the loading of the page.

<!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="window.alert('Page successfully loaded');">  
    <script>  

    document.write("The page is loaded successfully");  

    </script>  

</body>
</html>

In these article , we learn very deep in add events listner and i hope you enjoy learning.

webdevelopmentFrontend Developmentjs events