Introduction
This article exlains 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.
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>
![]()
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>
![]()
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>
![]()
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>
![]()
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>
![]()
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. In a future article we will learn more basic concepts of JavaScript.