There are many events available for JavaScript to change something. When JavaScript was first created, it used to add these little features on the webpage. Like someone clicks at some button, or the page has loaded.
We will look at the below, most important events and event example here.
onclick
The onclick event occurs when the user clicks on some elements. There are three ways to implement onclick or any other event.
We can implement any event in HTML. From any element like the <p> tag, we have onclick opening a function. We then implement the function inside <script> tag to show a text in innerHTML of a tag.
<!DOCTYPE html>
<html>
<body>
<h1 id="demo"></h1>
<p onclick="myFunction()">Click me.</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "The result of clicking";
}
</script>
</body>
</html>Save the above code in a .html file and open in any web browser. It will show the below webpage.
Before Clicking
Click me.
After Clicking
The Result of clicking
Click me.
We can implement the same using JavaScript. Here onclick event goes inside the <script> tag and so do all the logic. We are having two different ids here. In the “click” id we are attaching onclick event and then the function myFunction get calls when someone clicks on it. Here we show a text in innerHTML of the <h1> tag.
<!DOCTYPE html>
<html>
<body>
<h1 id="demo"></h1>
<p id="click">Click me.</p>
<script>
document.getElementById("click").onclick = function () { myFunction() };
function myFunction() {
document.getElementById("demo").innerHTML = "The result of clicking";
}
</script>
</body>
</html>The result will be the same as with the HTML when opened in a webpage.
We can implement the same using JavaScript’s addEventListener() method. In fact, it is the most common way to do it. Here we add the Event Listener method to the element, which we select by document.getElementById("click"). Inside it, we have two parameters – one the click event and other a callback function.
<!DOCTYPE html>
<html>
<body>
<h1 id="demo"></h1>
<p id="click">Click me.</p>
<script>
document.getElementById("click").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "The result of clicking";
}
</script>
</body>
</html>The onchange event occurs when the value of an element is changed like we change something in an input box, or in a select box or radio box.
<!DOCTYPE html>
<html>
<body>
Enter some text: <input type="text" onchange="myFunction(this.value)">
<script>
function myFunction(val) {
alert("The new value is: " + val);
}
</script>
</body>
</html>Save the above code in a .html file and open in any web browser. It will show the below webpage. Write something in the input box and click somewhere outside, you will get an alert box with the value you entered.
The onmouseover event occurs when the user moves the mouse over the targeted element. Opposite to it, the onmouseout event occurs when the user moves the mouse away from the targeted element.
Both these event handlers are generally used together. Below is an example using addEventListener way. Here we are adding two event listener, which fires two events. The mouseover event changes the color of an <h1> tag to green and the mouseout event changes. It back to black.
<!DOCTYPE html>
<html>
<body>
<h1 id="demo">Mouse over me</h1>
<script>
document.getElementById('demo').addEventListener('mouseover', mouseOver);
document.getElementById('demo').addEventListener('mouseout', mouseOut);
function mouseOver() {
document.getElementById('demo').style.color = 'green';
}
function mouseOut() {
document.getElementById('demo').style.color = 'black';
}
</script>
</body>
</html>Save the above code in a .html file and open in any web browser. It will show the below webpage. Move the mouse over to the text and it will change color to red. Move the mouse out and the color changes back to black.
The onload event in javascript occurs when an object has been loaded. onload is most often used within the <body> element to execute a script, once the whole page is loaded.
In the example below, we change the color and font-size of an element once the page is fully loaded
<!DOCTYPE html>
<html>
<body onload="myFunction()">
<div id="demo">Hello World!</div>
<script>
function myFunction() {
document.getElementById('demo').style.color = 'green';
document.getElementById('demo').style.fontSize = '52px';
}
</script>
</body>
</html> 
I have learned many things from this article. It is beneficial for me. Thank you!
Nice example for beginners.. I m a beginner so this is very helpful for me ... so plz give this type of beginners example..
This is a great introduction to variables in JavaScript! As a beginner to JavaScript, I found this guide very helpful in understanding the basics of variables and how they are used in JavaScript.
Thanks for sharing the information, it is very helpful, I hope to get more such beautiful blogs from you.
You have shared great information with me i appreciate your work!
Build various types of web applications,command-line application,etc....
Introduction: Angular (What is Angular?)Angular was formerly introdu...
Leave a Reply
Your email address will not be published. Required fields are marked *