JavaScript Trigger Change Event
Last Updated : Mar 12, 2024
IN - JavaScript | Written & Updated By - Anjali
In this article we will show you the solution of JavaScript trigger change event, let us know about the JavaScript event property first.
Event(): The event object is automatically produced and made accessible in JavaScript whenever a browser event, such as a mouse click, keyboard input, or form submission, takes place.
The event object lets you interact with it and retrieve pertinent data while also including information about the event. The event object allows you to take actions based on the event that happened.
Step By Step Guide On JavaScript Trigger Change Event :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript trigger change event</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
body{
background-color: aliceblue;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
h1{
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
h3{
color : rgb(95, 194, 95) ;
font-size: 20px;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3>javascript trigger change event</h3>
</center>
<input type="text" id="myInput" value="Initial Value">
<button onclick="triggerChangeEvent()">Trigger Change Event</button>
<script>
function triggerChangeEvent() {
var element = document.getElementById("myInput");
var event = new Event("change");
element.dispatchEvent(event);
}
</script>
</body>
</html>
- Writing HTML code <!DOCTYPE html> is used to specify the HTML version that a file is written in.
- The <HTML> tag used to specify the root of an HTML document must then be written. Additionally, add the </html> tag at the end.
- The metadata for the HTML file is contained in the <head> tag, which is closed with the </head> tag.
- The HTML document's <title> is then established using the title tag, which is followed by the < /title> tag.
- We'll use an external CSS file to style the HTML page.
- using <style> tag to add CSS
- create a <Center> tag the add a <h1> tag used to add a heading close it with </h1> tag and add a <h3> tag within it
- creating <input> tag with a type of text, id of myInput, and value of Initial Value
- create a <button> with onclick of triggerChangeEvent() that is a function evaluated in the <script> tag. Add the value of trigger change event and close it with </button> tag.
- using <script> tag to write JavaScript within it. And close it with the </script> tag.
- Declare the function of the button. And write a block of code within it that will execute.
- Now create a variable using the var keyword. Then equal it to the <input> tag id by document.getElementById() tag.
- Using event() property here to create a new event
- Again using dispatchEvent() to dispatch the event on the event
Conclusion :-
At last, in conclusion, we can say that with this article’s help, we know trigger change event using JavaScript.
I hope this article on JavaScript trigger change event helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
