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
<!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:
<!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.