How to trigger events in JavaScript ?
Last Updated :
20 Dec, 2023
Javascript is a high-level, interpreted, dynamically typed client-side scripting language. HTML is static and Javascript is used to add functionality to static HTML code. HTML events are handled by JavaScript. When an event occurs, it requires some action to be taken. This action can be accomplished through JavaScript event handlers. In addition to JavaScript, jQuery which is equivalent to JavaScript in terms of functionality can also be used to trigger events in an HTML document. In order to work on JavaScript trigger events, it is important to know what is an event. An event is an interaction between JavaScript and HTML. Some common HTML events are as follows:
- onload: It is triggered when the browser completes loading a page
- onchange: It is triggered when an HTML element changes.
- onclick: It is triggered when an HTML element is clicked.
- onmouseover: It is triggered when the mouse is moved over an HTML element.
- onmouseout: It is triggered when the mouse is moved out of an HTML element.
Events can be handled either through the addEventListener() method or we can trigger events on individual components by defining specific JavaScript functions. Let us consider the following examples.
Syntax:Â
document.addEventListener(event, function, phase);
Example 1: This example uses the addeventListener() method to trigger events in Javascript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<title>Document</title>
</head>
<body>
<h3>Click on the page to
trigger click event</h3>
<h3>Click on the page to
trigger mouseover event</h3>
<h3>Click on the page to
trigger mouseoutevent</h3>
<script type="text/javascript">
document.addEventListener("click",
function () {
alert("You clicked inside the document");
});
document.addEventListener("mouseover",
function () {
document.body.style.backgroundColor = "lavender";
});
document.addEventListener("mouseout",
function () {
document.body.style.backgroundColor = "white";
});
</script>
</body>
</html>
|
Output
Explanation: In this example, when the mouse is moved over the document the background color of the document changes to lavender. When the mouse is moved out the background color of the document changes back to white. And when the user clicks anywhere inside the document an alert pops up. These actions are handled by event handlers that are triggered when an event occurs.
Example 2: Triggering events on individual elements.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<title>Document</title>
</head>
<body>
<button onclick="clickFunction()">
Click Me
</button>
<br><br>
<div class="container" id="myDiv"
onmouseenter="enterFunction()"
onmouseleave="leaveFunction()">
Hello World...How are you
</div>
<script type="text/javascript">
function clickFunction() {
document.body.style
.backgroundColor = "pink";
}
function enterFunction() {
document.getElementById("myDiv")
.style.border = "1px solid black";
}
function leaveFunction() {
document.getElementById("myDiv")
.style.border = "2px solid blue";
}
</script>
</body>
</html>
|
Output:
Explanation:
Here individual elements in the HTML document trigger different events and those events invoke different JavaScript functions. The logic to handle the events is specified in the functions. When the button is clicked, it changes the background color of the webpage. The other events that are handled are mouseenter and mouseleave. When the mouse enters the container with an id named myDiv the border of the division turns black. When the mouse leaves the container the border of the division turns blue.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...