Various events in JavaScript

Sourav.Kayal
Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 1285 red flag

In this article we will learn various events in JavaScript.

Various events in JavaScript

In this article we will learn various events in JavaScript. I hope you are well known about event driven programming model. Event is nothing but an action against certain operation. For example one user is clicking on one button and for that some operation has done, so user has done this operation by button’s click event. In JavaScript many more events are there, in this article we will try to understand few of them.

Click event of button
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <script>
        function fun() {
            console.log('button clicked');
        }
    </script>
    <input type="button" name="Button" value="Click" onclick="fun()" />
</body>
</html>

In this button definition we have attached onclick() event which will call fun() function. Here is sample example.


mouseover event in JavaScript

mouseover event occur when user will put mouse over any object. In this example we are calling fun() function onmouseover event of button.

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



 onchange event to detect text change

onchange event is used to detect text change event of text box. In this example we are calling fun function on onchange event. When we will change text of textbox the event will generate.

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

Here is sample output of this example.


 ondoubleclick event

ondoubleclick event will generate when we make double click on button.  In this example we are calling fun() function ondoubleclick() event of button.

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


onfocus event

onfocus event occurs when we set focus on some control, for example we want to put some text in textbox and for that we have placed cursor there. In this scenario onfocus event occur. Here is example of onfocus event of text box.

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


onblur event of textbox

when we lost focus over one control at that moment onblur event occur. Here is sample implementation of onblur event in JavaScript.

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

This is sample output of above program.


onkeypress event of text box

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

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


 Conclusion:-

In this article we have learned various events in JavaScript. These events are useful in form validation. Hope you have enjoyed this article.

Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)