Most Important JS Events Every Front End Developer Should Learn

Most Important JS Events Every Front End Developer Should Learn

The function uses events in JavaScript to change our HTML content or modify an element's style. Several events are available in the JavaScript category, such as mouse event, click event, window events, etc. We will learn primarily used events which are the following:

1. onclick event: This is a mouse event, and it is called by the user when the user clicks on an element such as a button click. When the user clicks a button, the function executes, which is bound to an event.

Example:

<!DOCTYPE html>
<html>
<body>
<button onclick="test()">Click me</button>
<script>
function test() {
  alert(“hello onclick event is working fine”);
}
</script>
</body>
</html>

 

2. onkeyup event: This is a keyboard event that occurs when the user presses any button.

Example:

<!DOCTYPE html>
<html>
<head>
</head>
 
<body>
 
<input type="text" id="name" onkeyup="resume()">
<input type="text" id="email" onkeyup="resume()">
 
<p><b>Name :</b> <span id="namecontain"></span></p>
<p><b>Email :</b> <span id="emailcontain"></span></p>
 

<script>
 
function resume()
{
   var name =  document.getElementById("name").value;
   var email = document.getElementById("email").value;
  
   document.getElementById("namecontain").innerHTML=name;
      document.getElementById("emailcontain").innerHTML=email;
  
}
 
</script>
</body>
</html>

 

3. onchange event:  This event is mainly used with select box form elements of HTML.

Example:

<!DOCTYPE html>
<html>
<head>
<title>For loop</title>
</head>
 
<body>
 
<select id="selectval" onchange="createselect()">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
 
<select id="other">
 
</select>
 
<script>
 
function createselect()
{
   var selectvalue=document.getElementById('selectval').value;
   var len=selectvalue/2;
  
 
   var otherselect=document.getElementById('other');
           
            //otherselect.innerHTML="";
  
  otherselect.innerText = null;
  
   for(i=1;i<=len;i++)
   {
     var option = document.createElement("option");
     option.text = i;
     otherselect.appendChild(option);
   }
  
}
 
</script>
 
</body>
</html>

 

4.onmouseover event:  This is a mouse event that occurs when the user mouse over an element.

Example :

<!DOCTYPE html>
<html>
<body>
<button onmouseover="test()">Click me</button>
<script>
function test() {
  alert(“hello mouseover event is working fine”);
}
</script>
</body>
</html>

 

5.onload event: This event occurs when our DOM is completely loaded.

Example:

<!DOCTYPE html>
<html>
<body onload="myFunction()">
 
<h1>Hello World!</h1>
 
<script>
function myFunction() {
  alert("Page is loaded");
}
</script>
 
</body>
</html>

 

6.onfocus event:  This event is used to focus an element. It is used chiefly in form validation to focus an input that has an error.

Example:

<!DOCTYPE html>
<html>
<body>
 
Enter your name: <input type="text" onfocus="myFunction(this)">
 
<p>When the input field gets focus, a function is triggered which changes the background-color.</p>
 
<script>
function myFunction(x) {
  x.style.background = "yellow";
}
</script>
 
</body>
</html>
Categories: web designing javascript front end developer
Written By : Web Development Institute
Trending Courses

CodeIgniter

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Advance Digital Marketing Expert Course

Regular : 6 Months

Fastrack : 3 Months

Crash : 2 Months

React JS

Regular : 45 Days

Fastrack : 25 Days

Crash : 15 Days

Laravel

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Front End Developer

Regular : 6 Months

Fastrack : 4 Months

Crash : 2 Months

Web Expert with Python

Regular : 12 Months

Fastrack : 6 Months

Crash : 3 Months

Request For Demo