HTML Events
In this page:
What are HTML Events?
Events represent occurrences or actions that happen in the browser, typically triggered by user interactions. HTML allows you to bind event handlers directly to your tags to run JavaScript code when these actions occur.
Note: Use event listener scripts instead of inline event attributes to keep your code clean and organized.
Warning: Do not write complex, heavy code inside inline event attributes; keep your scripts modular.
Example: What are HTML Events?
<button onclick="alert('Clicked')">Click me</button>Mouse Events
Mouse events trigger scripts in response to mouse interactions, such as clicking a button (onclick), double-clicking (ondblclick), or hovering over an element (onmouseover).
Note: Use hover events to display helpful, interactive guide boxes next to your tools.
Warning: Ensure your mouse actions also work for keyboard-only and mobile users who cannot hover.
Example: Mouse Events
<button onclick="console.log('clicked')" ondblclick="console.log('double-clicked')" onmouseover="console.log('hovered')">
Hover or click me
</button>Keyboard Events
Keyboard events trigger scripts in response to keyboard interactions, such as pressing a key down (onkeydown) or releasing it (onkeyup), which is useful for creating keyboard shortcuts.
Note: Use keyboard events to let users submit calculations quickly by pressing the Enter key.
Warning: Make sure your custom keyboard shortcuts do not conflict with standard browser or screen-reader navigation shortcuts.
Example: Keyboard Events
<input type="text" onkeydown="console.log('key down')" onkeyup="console.log('key up')">Form Events
Form events trigger scripts in response to form interactions, such as submitting a form (onsubmit), changing an input value (onchange), or typing inside a text field (oninput).
Note: Use onsubmit to validate user inputs using JavaScript before sending data to the server.
Warning: Always call preventDefault inside your onsubmit handlers to prevent the browser from reloading the page during validation.
Example: Form Events
<form onsubmit="event.preventDefault()">
<input type="text" onchange="console.log('changed')" oninput="console.log('typing')">
</form>Window Events
Window events trigger scripts in response to browser window actions, such as when the page finishes loading (onload), when the window is resized (onresize), or when the user scrolls (onscroll).
Note: Use the onload event to initialize your scripts only after the page has finished loading.
Warning: Avoid writing heavy, complex scripts inside scroll event listeners as they can cause lag.
Example: Window Events
<body onload="console.log('page loaded')" onresize="console.log('resized')" onscroll="console.log('scrolled')">
</body>- Writing complex, heavy JavaScript code directly inside inline HTML event attributes.
- Forgetting to call preventDefault on form submit events, causing the browser to reload the page.
- Binding heavy, unoptimized scripts to scroll and resize events, slowing down page performance.
- HTML events trigger JavaScript code in response to user or browser window actions.
- Use mouse events (like onclick) and keyboard events (like onkeyup) to handle user inputs.
- Use form events (like onsubmit) to validate data on the front-end, and window events (like onload) to initialize your scripts safely.
Standard HTML event triggers and attributes are supported natively by all web browsers.
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: