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
