Events In JavaScript

Introduction

In this article, we learn about events in JavaScript. An event is nothing special, just doing a specific task in the browser. It is what happens when the user clicks a button. There are many different types of events in JavaScript. We explained some of the events in my previous article. In this article we will see some other events in JavaScript.

Event Definition

Events are actions that can be detected by JavaScript. By using JavaScript, we have the ability to create dynamic interfaces of web pages. Events are used in combination with functions.

Let’s see the events in JavaScript:

Onselect event
Onerror event
Onresize event
Onblur event
Onfocus event

Onselect Event

The onselect event occurs after some text has been selected in an element. Onselect can be used within: <input type=” file”> <input type=”text”>. This is used to copy or select the input box text.

Syntax

In HTML Syntax:

<element onselect = “Some code”>

In JavaScript Syntax:

object.onselect = “Some code”

Example

This example demonstrates the JavaScript onselect event:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onselect event</title>
</head>
<body>
<h2>Onselect Event in JavaScript</h2>
<form>
<label>Enter User Name:</label>
<input type="text" name="fname" onselect="textselect()"><br>
<label>Enter Password:</label>
<input type="password" name="pwd">
</form>
<script type="text/javascript">
function textselect() {
alert("Some text must not be selected");
}
</script>
</body>
</html>

Output

Here is an output of the onselect event example shown above:

Onerror Event

The onerror event is triggered if an error occurs while loading an external file (e.g. document or an image). If the image is not loaded when the error message arrives, the error will return. If the error is not received, then the image has loaded correctly.

Syntax

In HTML Syntax:

<element onerror = “Some code”>

In JavaScript Syntax:

object.onerror = “Some code”

Example

This example demonstrates a JavaScript onerror event:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Onerror Event</title>
</head>
<body>
<h2>Onerror Evenet in JavaScript</h2>
<script type="text/javascript">
function myerror() {
alert("image unable to load");
alert("image resource not found");
}
</script>
<img src="html.jpg" width="200px" height="200px" onerror="myerror()" alt="sorry image resource are not found">
</body>
</html>

Output

Here is the output of the onerror event example given above:

Onresize Event

The onresize event occurs when the size of an element has changed.

Syntax

In HTML Syntax:

<element onresize = “Some code”>

In JavaScript Syntax:

object.onresize = “Some code”

Example

This example demonstrates a JavaScript onresize event:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Onresize event</title>
</head>
<body onresize="pageresize()">
<h2>Onresize event in JavaScript</h2>
<p>Resize the page and check the alert message....</p>
<p>one resized warning displayed successfully.</p>
<script type="text/javascript">
function pageresize() {
alert("Sorry page unable to resize");
}
</script>
</body>
</html>

Output

Here is the output of the onresize event example shown above:

Onblur Event

The onblur occurs when an object loses focus. Onblur is most often used with form validation code (when the user leaves a form field).

Note

The onblur event is the opposite of the onfocus event.

Syntax

In HTML Syntax:

<element onblur = “Some code”>

In JavaScript Syntax:

object.onblur = “Some code”

Example

This example demonstrates the JavaScript onblur event:

<!DOCTYPE html>
<html>
<head>
<title>Onblur Event</title>
</head>
<body>
<h2>Onblur event in JavaScript</h2>
<form>
<label>Enter the Name in Lowercase:</label>
<input type="text" id="fname" onblur="uppercase()"><br>
<label>Enter the Name in Uppercase:</label>
<input type="text" id="lname" onblur="lowercase()"><br>
</form>
<script type="text/javascript">
function uppercase() {
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
function lowercase() {
var x=document.getElementById("lname");
x.value=x.value.toLowerCase();
}
</script>
</body>
</html>

Output

Here is the output of the onblur event example shown above:

Onfocus Event

The onfocus event occurs when an element gets focus. The onfocus event is the opposite of the onblur event.

Syntax

In HTML Syntax:

<element onfocus = “Some code”>

In JavaScript Syntax:

object.onfocus = “Some code”

Example

This example demonstrates the JavaScript onfocus event:

<!DOCTYPE html>
<html>
<head>
<title>Onfocus event</title>
</head>
<body>
<h2>Onfocus event in JavaScript</h2>
<script type="text/javascript">
function onfcs(x) {
x.style.color="white";
x.style.backgroundColor="green";
}
//onfocus event is the opposite of the onblur event
function onblr(x) {
x.style.color="green";
x.style.backgroundColor="white";
}
</script>
<input type="text" onfocus="onfcs(this)" onblur="onblr(this)">
</body>
</html>

Output

Here is the output of the onfocus event example shown above:

Conclusion

In this article, we have seen some more events in JavaScript. I hope this article is useful to you. Thanks for reading!