The modification in the condition of an object is referred to as an Event. In HTML, numerous events signify that an action has been taken either by the user or the browser. When JavaScript code is embedded in HTML, it responds to these events, facilitating their execution. This mechanism of responding to events is termed Event Handling. Therefore, JavaScript manages HTML events through Event Handlers.
For instance, when a user interacts with the browser by clicking, you can incorporate JavaScript code that will trigger the specific task intended for that event.
Event Handler Uses:
It is possible to utilize them directly inside HTML elements by incorporating specific attributes into those elements. Additionally, they can be employed within the <script> tags or in separate JavaScript files.
A selection of HTML events along with their corresponding event handlers includes:
Mouse events:
| Event Performed | Event Handler | Description |
|---|---|---|
| click | onclick | When mouse click on an element |
| mouseover | onmouseover | When the cursor of the mouse comes over the element |
| mouseout | onmouseout | When the cursor of the mouse leaves an element |
| mousedown | onmousedown | When the mouse button is pressed over the element |
| mouseup | onmouseup | When the mouse button is released over the element |
| mousemove | onmousemove | When the mouse movement takes place. |
Keyboard events:
| Event Performed | Event Handler | Description |
|---|---|---|
| Keydown & Keyup | onkeydown & onkeyup | When the user press and then release the key |
Form events:
| Event Performed | Event Handler | Description |
|---|---|---|
| focus | onfocus | When the user focuses on an element |
| submit | onsubmit | When the user submits the form |
blur |
onblur | When the focus is away from a form element |
| change | onchange | When the user modifies or changes the value of a form element |
Window/Document events
| Event Performed | Event Handler | Description |
|---|---|---|
load |
onload | When the browser finishes the loading of the page |
| unload | onunload | When the visitor leaves the current webpage, the browser unloads it |
| resize | onresize | When the visitor resizes the window of the browser |
| reset | onreset | When the window size is resized |
| scroll | onscroll | When the visitor scrolls a scrollable area |
Let's discuss some examples over events and their handlers.
Click Event
<html>
<head> Javascript Events </head>
<body>
<script language="Javascript" type="text/Javascript">
<!--
function clickevent()
{
document.write("This is Example");
}
//-->
</script>
<form>
<input type="button" onclick="clickevent()" value="Who's this?"/>
</form>
</body>
</html>
Explanation:
In the preceding example, we developed a function named "clickevent," which is invoked through the "onclick" event. When a user clicks this button, the function is executed, returning the string "This is Example." The "document.write" method is utilized to display the returned string on the document.
MouseOver Event
<html>
<head>
<h1> Javascript Events </h1>
</head>
<body>
<script language="Javascript" type="text/Javascript">
<!--
function mouseoverevent()
{
alert("This is Example");
}
//-->
</script>
<p onmouseover="mouseoverevent()"> Keep cursor over me</p>
</body>
</html>
Explanation:
In the preceding example, we have defined a function named "mouseoverevent" that is triggered by the "onmouseover" event. When a user hovers the mouse over a <p> text, this function is invoked and an alert dialog will appear. The mouseoverevent function can be utilized repeatedly throughout our program, which helps in conserving memory.
Focus Event
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onfocus="focusevent()"/>
<script>
<!--
function focusevent()
{
document.getElementById("input1").style.background=" aqua";
}
//-->
</script>
</body>
</html>
Explanation:
In the preceding example, we have established a function named "focusevent" that is invoked through the "onfocus" event. When a user directs their focus to a text input field, this function is triggered, resulting in a change of the background color of the text field.
Keydown Event
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onkeydown="keydownevent()"/>
<script>
<!--
function keydownevent()
{
document.getElementById("input1");
alert("Pressed a key");
}
//-->
</script>
</body>
</html>
Explanation:
In the example provided above, we have defined a function named "keydownevent" that is triggered by the "onkeydown" event. Whenever a user focuses on a text input field, this function is executed, resulting in the display of an alert box.
Load event
<html>
<head>Javascript Events</head>
</br>
<body onload="window.alert('Page successfully loaded');">
<script>
<!--
document.write("The page is loaded successfully");
//-->
</script>
</body>
</html>
Explanation:
In the previous illustration, we established an "onload" event for the HTML <body> element. When the HTML body is fully loaded, a function will output the string "The page is loaded successfully," and the "document.write" method will be utilized to display the returned string on the webpage.