Introduction to HTML Events
HTML events are occurrences recognized by web browsers that can trigger JavaScript functions or other actions. Events can be user-initiated, like clicks and keystrokes, or system-generated, such as the page finishing loading.
Types of HTML Events 🌈
-
Mouse Events 🖱️
-
click
: Triggered when the mouse is clicked. -
mouseover
: Fired when the mouse enters an element. -
mouseout
: Fired when the mouse leaves an element.
<button onclick="handleClick()">Click me!</button> <script> function handleClick() { alert('Button clicked!'); } </script>
-
-
Keyboard Events ⌨️
-
keydown
: Occurs when a key is pressed. -
keyup
: Fired when a key is released.
<input type="text" onkeyup="handleKeyUp(event)"> <script> function handleKeyUp(event) { console.log('Key pressed:', event.key); } </script>
-
-
Form Events 📝
-
submit
: Triggered when a form is submitted. -
change
: Fired when the value of an input changes.
<form onchange="handleChange()"> <input type="text" /> </form> <script> function handleChange() { console.log('Input changed!'); } </script>
-
-
Window Events 🖼️
-
load
: Fired when the page finishes loading. -
resize
: Triggered when the browser window is resized.
<body onload="handleLoad()" onresize="handleResize()"> <script> function handleLoad() { console.log('Page loaded!'); } function handleResize() { console.log('Window resized!'); } </script>
-
Event Handling in HTML 🤹♂️
Handling events can be done in HTML using inline attributes or in JavaScript using event listeners.
Inline Event Handling 🎭
<button onclick="handleClick()">Click me!</button>
<script>
function handleClick() {
alert('Button clicked!');
}
</script>
Event Listeners in JavaScript 🧩
<button id="myButton">Click me!</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function () {
alert('Button clicked!');
});
</script>
Event Propagation 🌐
Understanding event propagation is crucial. Events can propagate in two phases: capturing phase and bubbling phase.
<div onclick="handleDivClick()">
<button onclick="handleButtonClick()">Click me!</button>
</div>
<script>
function handleDivClick() {
console.log('Div clicked!');
}
function handleButtonClick() {
console.log('Button clicked!');
}
</script>
In the above example, clicking the button triggers both handleButtonClick
and handleDivClick
because of event bubbling.
Bonus Tip
One Time Listener
The { once: true }
option is a boolean parameter you can add when using addEventListener
. It's like a golden ticket that ensures your event listener fires only once. After the event is triggered and the handler executed, the listener is automatically removed.
Example
Consider a scenario where you want to show a welcome message to users but only the first time they click a button. The { once: true }
option makes this a breeze:
<button id="welcomeButton">Click me for a welcome!</button>
<script>
function showWelcome() {
alert("Welcome! Thanks for visiting.");
}
document.getElementById("welcomeButton").addEventListener("click", showWelcome, { once: true });
</script>
Top comments (3)
Most engineers forget about the very nice option called
once
.element.addEventListener("click", eventHandler, { once: true });
Great tip! Thanks! 🙌
gerat post