JavaScript HTML DOM Events

Introduction

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.

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.