This article Explains Various Events in JavaScript for Beginners ^

This article explains various events in JavaScript. An event is nothing but an action against a certain operation. For example, a user clicks on a button, and for that something is done, so the user has done this by the button’s click event. In JavaScript, many more events exist, in this article, we will try to understand a few of them.

1. mouseover event in JavaScript

The mouseover event occurs when the user drags the mouse cursor over an object. In this example we are calling the fun() function onmouseover event of the button.

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head id="Head1" runat="server">  
</head>  
<body>  
    <script>  
        function fun() {  
            console.log('Mouse Over event');  
        }  
    </script>  
    <input type="button" name="Button" value="Mouse over" onmouseover="fun()" />  
</body>  
</html>

This is image title

2. onchange event to detect text change

The onchange event occurs when the text of a text box is changed. In this example, we are calling the fun function on the onchange event. When we change the text of a TextBox the event will be generated.

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head id="Head1" runat="server">  
</head>  
<body>  
    <script>  
        function fun() {  
            console.log('Text change event');  
        }  
    </script>  
    <input type="text" name="name" onchange="fun()" />  
</body>  
</html>

This is image title

3. ondoubleclick event

The ondoubleclick event occurs when we double-click a button. In this example we are calling the fun() function for the ondoubleclick() event of a button.

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head id="Head1" runat="server">  
</head>  
<body>  
    <script>  
        function fun() {  
            console.log('double click event');  
        }  
    </script>  
    <input type="button" name="name" value="doule click" ondblclick="fun()" />  
</body>  
</html>

This is image title

4. onfocus event

The onfocus event occurs when we set the focus to some control, for example we want to put some text in a TextBox and for that we put the cursor there. In this scenario, the onfocus event occurs. Here is an example of the onfocus event of a text box.

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head id="Head1" runat="server">  
</head>  
<body>  
    <script>  
        function fun() {  
            console.log('focus on text box');  
        }  
    </script>  
    <input type="text" name="name" value="" onfocus="fun()" />  
</body>  
</html>

This is image title

5. onblur event of TextBox

When we lose the focus of control the onblur event occurs. Here is a sample implementation of the onblur event in JavaScript.

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head id="Head1" runat="server">  
</head>  
<body>  
    <script>  
        function fun() {  
            console.log('Focus has lost');  
        }  
    </script>  
    <input type="text" name="name" value="" onblur="fun()" />  
</body>  
</html>

This is image title

6. onkeypress event of text box

The onkeypress event occurs when we press a key over a control. In this example we are calling the fun() function in the onkeypress event of JavaScript.

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head id="Head1" runat="server">  
</head>  
<body>  
    <script>   
        function fun() {   
            console.log('Key   
            press event occur');   
        }   
    </script>  
    <input type="text" name="name" value="" onkeypress="fun()" />  
</body>  
</html>

Some important events that are very useful for our browser are:

onafterprint
onbeforeprint
onbeforeload
onblur
onerror
onfocus
onhaschange
onload
onmessage
onoffline
ononline
onpagehide
onpageshow
onpopstate
onredo
onresize
onstorage
onundo
onunload

Summary

In this article, we learned events in JavaScript. Thank you for reading!

#javascript #events in javascript