HTML Events
Learn how to handle user interactions with HTML event attributes
⚡ What are HTML Events?
HTML events are actions that happen to HTML elements, such as clicking a button, loading a page, or moving the mouse. You can respond to these events using JavaScript.
<!-- Basic event example -->
<button onclick="alert('Hello World!')">Click Me</button>
<!-- Multiple events -->
<div onmouseover="this.style.color='red'"
onmouseout="this.style.color='black'">
Hover over me!
</div>
Mouse Events
onclick
Triggered when element is clicked
<button onclick="alert('Clicked!')">
Click Me
</button>onmouseover
Triggered when mouse enters element
<div onmouseover="this.style.background='yellow'">
Hover me
</div>onmouseout
Triggered when mouse leaves element
<div onmouseout="this.style.background='white'">
Leave me
</div>ondblclick
Triggered on double-click
<p ondblclick="alert('Double clicked!')">
Double click me
</p>🔹 Keyboard Events
Events triggered by keyboard interactions:
<!-- Key press events -->
<input type="text"
onkeydown="console.log('Key pressed down')"
onkeyup="console.log('Key released')"
onkeypress="console.log('Key pressed')"
placeholder="Type something">
<!-- Specific key detection -->
<input type="text"
onkeyup="if(event.key==='Enter') alert('Enter pressed!')"
placeholder="Press Enter">Output:
🔹 Form Events
Events related to form elements and submission:
<form onsubmit="alert('Form submitted!'); return false;">
<!-- Focus events -->
<input type="text"
onfocus="this.style.background='lightblue'"
onblur="this.style.background='white'"
placeholder="Focus me">
<!-- Change event -->
<select onchange="alert('Selection changed to: ' + this.value)">
<option value="">Choose...</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<button type="submit">Submit</button>
</form>Output:
🔹 Window Events
Events that occur on the window or document level:
<!-- Page load events -->
<body onload="alert('Page loaded!')">
<!-- Window resize -->
<body onresize="console.log('Window resized')">
<!-- Before page unload -->
<body onbeforeunload="return 'Are you sure you want to leave?'">
<!-- Scroll event -->
<body onscroll="console.log('Page scrolled')">
<!-- Image load event -->
<img src="image.jpg" onload="alert('Image loaded')" onerror="alert('Image failed to load')">Output:
These events trigger automatically based on user actions:
- onload: When page finishes loading
- onresize: When window is resized
- onbeforeunload: Before leaving page
- onscroll: When page is scrolled