JavaScript Events

JavaScript Events are things that happen to HTML elements. When JavaScript is used on HTML pages, it responds to these events. An event attribute can be something the browser does or something the user does. To summarize a few examples, this can happen when the page loads, when an input field is changed, or when we click a button. Often, when events occur, we want something to happen. HTML allows adding global attributes with JavaScript code.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Events Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <style>
        .demo-box {
            width: 200px;
            height: 100px;
            background-color: #f0f0f0;
            color: black;
            border: 2px solid #333;
            margin: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .clicked {
            background-color: #4CAF50;
            color: white;
        }
        .hovered {
            background-color: #2196F3;
            color: white;
        }
    </style>
</head>
<body>
    <div id="demoBox" class="demo-box" 
         onclick="handleClick()" 
         onmouseover="handleMouseOver()" 
         onmouseout="handleMouseOut()">
        Interactive Element
    </div>

    <div id="status" style="margin: 20px;"></div>

    <script>
        const box = document.getElementById("demoBox");
        const status = document.getElementById("status");
        let clickCount = 0;

        function handleClick() {
            clickCount++;
            box.classList.toggle("clicked");
            updateStatus(`Click count: ${clickCount}`);
        }

        function handleMouseOver() {
            box.classList.add("hovered");
            updateStatus("Mouse is over the element");
        }

        function handleMouseOut() {
            box.classList.remove("hovered");
            box.classList.remove("clicked");
            updateStatus("Mouse left the element");
        }

        function updateStatus(message) {
            status.textContent = message;
        }

        window.onload = function() {
            updateStatus("Page loaded and ready!");
        };
    </script>
</body>
</html>

RESULT

Event Handlers

Event handlers can be used to process and validate user input, user actions, and browser actions:

Things that should be done every time the page loads.
Things that need to be done when the page is closed.
Action to be performed when the user clicks a button.
Content that needs to be validated when the user enters data.

How Events Work

To make JavaScript work with events, many different methods can be used:

HTML Event attributes can directly execute JavaScript code.
HTML Event attributes can call JavaScript functions.
HTML elements can be assigned custom event handler functions.
We can prevent the submission or handling of events.

Overview of JavaScript Events

The table below shows the most commonly used events in JavaScript, categorized by type (mouse, keyboard, forms, loading, etc.). For each event, the description of operation, syntax for use in HTML, and a concrete code example are provided.

Name	Description	Syntax (HTML)	Example
onclick	Fires when an element is clicked.	`<tag onclick="functionName()">`	`<button onclick="alert('Clicked!')">Click</button>`
ondblclick	Fires when an element is double-clicked.	`<tag ondblclick="functionName()">`	`<img ondblclick="zoomIn()" src="image.jpg">`
onmouseover	Fires when the mouse pointer moves over an element.	`<tag onmouseover="functionName()">`	`<div onmouseover="this.style.color='red'">Hover over me</div>`
onmouseout	Fires when the mouse pointer moves out of an element.	`<tag onmouseout="functionName()">`	`<div onmouseout="this.style.color='black'">Move mouse away</div>`
onmousedown	Fires when a mouse button is pressed down on an element.	`<tag onmousedown="functionName()">`	`<button onmousedown="console.log('Pressed')">Button</button>`
onmouseup	Fires when a mouse button is released over an element.	`<tag onmouseup="functionName()">`	`<button onmouseup="console.log('Released')">Button</button>`
onmousemove	Fires when the mouse pointer is moving while it is over an element.	`<tag onmousemove="functionName(event)">`	`<div onmousemove="showCoordinates(event)">Move mouse</div>`
onkeydown	Fires when a key is pressed down.	`<tag onkeydown="functionName(event)">`	`<input onkeydown="if(event.key==='Enter') submit()">`
onkeyup	Fires when a key is released.	`<tag onkeyup="functionName(event)">`	`<input onkeyup="search(this.value)">`
onkeypress	Fires when a key is pressed and released (deprecated).	`<tag onkeypress="functionName(event)">`	`<input onkeypress="console.log(event.charCode)">`
onchange	Fires when the value of an element has been changed.	`<tag onchange="functionName()">`	`<select onchange="updateOptions(this.value)"></select>`
oninput	Fires immediately when the value of an element is changed.	`<tag oninput="functionName()">`	`<input oninput="validate(this.value)">`
onfocus	Fires when an element gets focus.	`<tag onfocus="functionName()">`	`<input onfocus="this.select()">`
onblur	Fires when an element loses focus.	`<tag onblur="functionName()">`	`<input onblur="validateInput(this.value)">`
onsubmit	Fires when a form is submitted.	`<form onsubmit="functionName(event)">`	`<form onsubmit="event.preventDefault(); sendData();"></form>`
onreset	Fires when a form is reset.	`<form onreset="functionName()">`	`<form onreset="console.log('Reset')"></form>`
onselect	Fires when some text in an input field is selected.	`<tag onselect="functionName()">`	`<input onselect="console.log('Selected')">`
onload	Fires when a page or an image has finished loading.	`<body onload="functionName()">`	`<body onload="startApp()">`
onunload	Fires when a user leaves a page (deprecated).	`<body onunload="functionName()">`	`<body onunload="saveState()">`
onbeforeunload	Fires when the window is about to unload (e.g., closing tab).	`<body onbeforeunload="functionName()">`	`<body onbeforeunload="return 'Unsaved changes?'">`
onerror	Fires when an error occurs while loading a resource.	`<img onerror="functionName()">`	`<img src="error.jpg" onerror="replaceImage()">`
onresize	Fires when the browser window is resized.	`<body onresize="functionName()">`	`<body onresize="adjustLayout()">`
onscroll	Fires when an element's scrollbar is being scrolled.	`<tag onscroll="functionName()">`	`<div onscroll="loadMoreContent()"></div>`
ondrag	Fires when an element is being dragged.	`<tag ondrag="functionName(event)">`	`<div draggable="true" ondrag="transferData(event)">Drag me</div>`
ondrop	Fires when a dragged element is dropped on a target.	`<tag ondrop="functionName(event)">`	`<div ondrop="event.preventDefault(); add(event.dataTransfer.getData('text'));">Drop here</div>`