How to Handle JavaScript Events in HTML ?
Last Updated :
12 Aug, 2021
An Event is an action or occurrence recognized by the software. It can be triggered by the user or the system. Mostly Events are used on buttons, hyperlinks, hovers, page loading, etc. All this stuff gets into action(processed) with the help of event handlers.
In this article, you will learn about different types of HTML event handler attributes. Basically, to handle events in HTML, you just need to add the function in the HTML tag which is going to be executed in JavaScript when any event in HTML is fired or triggered. There are many event attributes in HTML like keyboard event, mouse event, form event, etc. which are discussed briefly.
Syntax:
Handle event in HTML :
<element onclick="myScript">
Various HTML event attributes:
Form Event
- onblur: This event occurs when an object loses focus.
<element onblur="myScript">
- onchange: This event occurs when the value of an element has been changed.
<element onchange="myScript">
- onfocus: This event occurs when element get focus.
<element onfocus="myScript">
Example 1: When the user selects the button from the select tag, onchange() event is fired and then OnChangeFunction() is called which is present in JavaScript. So an event handler defined in the HTML can call a function defined in a script
HTML
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<input type="text" name="blur" id="blur"
onblur="BlurFunction()"
placeholder="Enter Name" />
<br /><br />
<select id="course" onchange="OnChangeFunction()">
<option value="Competitive Programming">
Competitive Programming
</option>
<option value="Operating System">
Operating System
</option>
<option value="Web Development">
Web Development
</option>
<option value="Android Development">
Android Development
</option>
</select>
<p id="demo"></p>
<br /><br />
<input type="text" id="focus"
onfocus="FocusFunction(this.id)"
placeholder="Enter Your Semester" /><br />
</center>
<script>
function BlurFunction() {
let x = document.getElementById("blur");
x.value = x.value.toUpperCase();
}
function OnChangeFunction() {
let x = document.getElementById("course").value;
document.getElementById("demo")
.innerHTML = "You selected: " + x;
}
function FocusFunction(x) {
document.getElementById(x)
.style.background = "green";
}
</script>
</body>
</html>
Output:
blur,focus and onchange
Event
- onclick: This event occurs when user clicks on an element.
<element onclick="myScript">
- onmouseover: This event occurs when user hover mouse pointer over an element.
<element onmouseover="myScript">
Example 2:
HTML
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<button onclick="OnClickFunction()">
Click me
</button>
<p id="demo"></p>
<br /><br />
<p onmouseover="MouseHover()">
Hover Mouse Here
</p>
</center>
<script>
function OnClickFunction() {
document.getElementById("demo")
.innerHTML = "GeeksforGeeks";
}
function MouseHover() {
alert("Mouse move over");
}
</script>
</body>
</html>
Output:
Mouseover
In above output, 'Click Me' button calls the OnClickFunction() function when it is clicked. The OnClickFunction() is a function defined in a separate <script> element.
Disadvantages of using HTML event handler attributes:
- Assigning event handlers using HTML event handler attributes are considered a bad practice.
- The event handler code is mixed with the HTML code, which will make the code more difficult to maintain and extend.
- There is a problem with timing, as if the element is loaded fully before the JavaScript code, users can start interacting with the element on the webpage which will cause an error.
Similar Reads
How to Remove Event Handlers in JavaScript ? In JavaScript, event handlers are functions attached to HTML elements to respond to specific events like clicks or mouse movements. Removing event handlers effectively detaches the specified function from listening to that particular event on that element. Table of Content Using removeEventListener(
3 min read
How to Add JavaScript in HTML Document? To add JavaScript in HTML document, several methods can be used. These methods include embedding JavaScript directly within the HTML file or linking an external JavaScript file.Inline JavaScriptYou can write JavaScript code directly inside the HTML element using the onclick, onmouseover, or other ev
3 min read
How to call JavaScript function in HTML ? In HTML, you can easily call JavaScript functions using event attributes like onclick and onload. Just reference the function name within these attributes to trigger it. You can also call functions directly within script blocks using standard JavaScript syntax. Let's create an HTML structure with so
2 min read
How to trigger events in JavaScript ? JavaScript is a high-level, interpreted, dynamically typed client-side scripting language. While HTML is static and defines the structure of a web page, JavaScript adds interactivity and functionality to HTML elements. This interaction is facilitated through events, which are actions or occurrences
2 min read
How does inline JavaScript work with HTML ? Inline JavaScript refers to JavaScript code embedded directly within HTML elements using the onclick, onmouseover, or other event attributes. This allows you to execute JavaScript code in response to user interactions or specific events without needing a separate JavaScript file or script block.Synt
2 min read
How to define a client-side script in HTML5 ? To define a client-side script in HTML5, we can do <script> tag or adding external script file by src attribute to the HTML file. <script> tag contains the JavaScript to be added for the client-side scripting. Syntax: <script> // JavaScript goes here console.log('GeeksforGeeks');
1 min read
How to get/change the HTML with DOM element in JavaScript ? In order to get/access the HTML for a DOM element in JavaScript, the first step is to identify the element base on its id, name, or its tag name. Then, we can use inner.HTML or outer.HTML to get the HTML. Using the getElementById() method: This method gets/identifies the DOM elements using its ID an
3 min read
Foundation CSS JavaScript Events Foundation CSS JavaScript is a set of JavaScript tools and plugins that can be used to add interactivity and functionality to your website. It includes a variety of plugins for things like modals, alerts, and accordions, as well as utility functions for handling events and working with the DOM. Foun
3 min read
How are DOM utilized in JavaScript ? What is DOM The document object Model (DOM) represents the full HTML document. When an HTML document is loaded within the browser, it becomes a document object. The root element represents the HTML document, its properties, and its methods. With the assistance of a document object, we will add dynam
3 min read
JavaScript HTML DOM The JavaScript HTML DOM (Document Object Model) is a powerful tool that represents the structure of an HTML document as a tree of objects. It allows JavaScript to interact with the structure and content of a webpage. By manipulating the DOM, you can update the content, structure, and styling of a pa
4 min read