JavaScript Events
JavaScript Events are actions or occurrences that happen in the browser. They can be triggered by various user interactions or by the browser itself.
Common events include mouse clicks, keyboard presses, page loads, and form submissions. Event handlers are JavaScript functions that respond to these events, allowing developers to create interactive web applications.
Syntax:
<HTML-element Event-Type = "Action to be performed">
Common JavaScript Events Table
| Event Attribute | Description |
|---|---|
| onclick | Triggered when an element is clicked. |
| onmouseover | Fired when the mouse pointer moves over an element. |
| onmouseout | Occurs when the mouse pointer leaves an element. |
| onkeydown | Fired when a key is pressed down. |
| onkeyup | Fired when a key is released. |
| onchange | Triggered when the value of an input element changes. |
| onload | Occurs when a page has finished loading. |
| onsubmit | Fired when a form is submitted. |
| onfocus | Occurs when an element gets focus. |
| onblur | Fired when an element loses focus. |
1. JavaScript Events Examples
Example 1: Here, we will display a message in the alert box when the button is clicked using onClick() event. This HTML document features a button styled to appear in the middle of the page. When clicked, the button triggers the `hiThere()` JavaScript function, which displays an alert box with the message “Hi there!”.
<!doctype html>
<html>
<head>
<script>
function hiThere() {
alert('Hi there!');
}
</script>
</head>
<body>
<button type="button"
onclick="hiThere()"
style="margin-left: 50%;">
Click me event
</button>
</body>
</html>
Output:
Example 2: Here, we will change the color by pressing UP arrow key using onkeyup() event. This code defines a JavaScript function `changeBackground()` that changes the background color of an input box when the up arrow key is pressed. RGB color values are incremented with each key press, cycling through colors.
<!doctype html>
<html>
<head>
<script>
let a=0;
let b=0;
let c=0;
function changeBackground() {
let x=document.getElementById('bg');
x.style.backgroundColor='rgb('+a+', '+b+', '+c+')';
a+=100;
b+=a+50;
c+=b+70;
if(a>255) a=a-b;
if(b>255) b=a;
if(c>255) c=b;
}
</script>
</head>
<body>
<h4>The input box will change color when UP arrow key is pressed</h4>
<input id="bg" onkeyup="changeBackground()" placeholder="write something" style="color:#fff">
</body>
</html>
Output:
2. JavaScript Event Handlers
JavaScript event handlers are functions that are executed in response to specific events occurring in the browser.
They can be attached to HTML elements using event attributes like onclick, onmouseover, etc., or added dynamically using the addEventListener() method in JavaScript.
Example: Here’s an example of a JavaScript event handler attached to an HTML button element using the onclick attribute. This code demonstrates an event handler attached to a button element. When the button is clicked, the `myFunction()` JavaScript function is invoked, triggering an alert box displaying “Button clicked!”.
<!DOCTYPE html>
<html>
<head>
<title>Event Handler Example</title>
</head>
<body>
<button onclick="myFunction()">Click me</button>
<script>
// JavaScript function to handle the click event
function myFunction() {
alert("Button clicked!");
}
</script>
</body>
</html>
Output: