Definition: events are actions or occurrences that happen in the browser, which can be detected and responded to using JavaScript.
Events allow HTML elements to be interactive and dynamic .
1. How Events Work
An event happens (e.g., user clicks a button).
An event handler (a JavaScript function) is triggered.
The handler runs code in response to the event.
Example:
<button onclick="alert('Button Clicked!')">Click Me</button>
Here:
onclick → event attributealert(...) → event handler function
2. Main Types of HTML Events (with Examples) A) Mouse Events Event Description Example onclickFires when element is clicked <button onclick="...">ondblclickFires on double-click <div ondblclick="...">onmousedownMouse button pressed <img onmousedown="...">onmouseupMouse button released <p onmouseup="...">onmouseoverPointer enters element <span onmouseover="...">onmouseoutPointer leaves element <span onmouseout="...">onmousemovePointer moves over element <div onmousemove="...">
B) Keyboard Events Event Description Example onkeydownKey pressed <input onkeydown="...">onkeypressKey pressed and held (deprecated, use keydown) <input onkeypress="...">onkeyupKey released <input onkeyup="...">
C) Form Events Event Description Example onsubmitForm submitted <form onsubmit="...">onresetForm reset <form onreset="...">onchangeValue changed (after losing focus) <input onchange="...">oninputValue changes instantly while typing <textarea oninput="...">onfocusElement gets focus <input onfocus="...">onblurElement loses focus <input onblur="...">
D) Window / Document Events Event Description Example onloadPage loaded <body onload="...">onunloadPage unloaded/closed <body onunload="...">onresizeBrowser window resized <body onresize="...">onscrollPage/element scrolled <div onscroll="...">
E) Drag & Drop Events Event Description ondragElement is being dragged ondragstartDragging starts ondragendDragging ends ondragoverDragging over a target ondropDropped on target
3. Example – Using Different Events <!DOCTYPE html>
<html>
<body>
<h2>HTML Events Example</h2>
<!-- Mouse Event -->
<button onclick="alert('Button clicked!')">Click Me</button>
<!-- Keyboard Event -->
<input type="text" onkeyup="console.log('Key released!')">
<!-- Form Event -->
<form onsubmit="alert('Form Submitted!'); return false;">
<input type="text" placeholder="Enter name">
<button type="submit">Submit</button>
</form>
<!-- Window Event -->
<body onload="console.log('Page Loaded!')">
</body>
</html>
