Essential HTML Events

In the world of web development, events play a crucial role in making websites interactive and dynamic. HTML events refer to actions or occurrences that happen in the browser and trigger specific responses from web elements. These can be anything from clicking a button, hovering over an image, pressing a key, or submitting a form. The ability to handle these events allows developers to build interactive user interfaces and enhance user experiences.

This chapter will guide you through the most essential HTML events, explain their importance, show you how to handle them, and provide examples to help you integrate these events into your web pages effectively.

HTML Events

In simple terms, an event is something that happens on a web page. This can be a user action (like clicking or typing) or an automatic occurrence (like the page loading). Handling these events allows developers to create interactive websites, where the website responds to user actions in real-time.

For example:

  • Clicking a button to submit a form.
  • Pressing a key to trigger a search.
  • Hovering over an image to change its style.

These events are handled by using event handlers, which are specific pieces of code that run when an event occurs.

Event Types

There are various types of events in HTML, categorized into different groups:

  • Mouse Events: Triggered by mouse actions like clicking, moving, or hovering over elements.
  • Keyboard Events: Triggered when users interact with the keyboard.
  • Form Events: Related to form interactions like submitting or changing form values.
  • Window Events: Triggered when actions occur to the browser window, such as loading, resizing, or scrolling.

Each of these event types can be handled using built-in event attributes (like onclick, onkeydown, etc.) or JavaScript event listeners.

Event Handlers in HTML

Event handlers are pieces of JavaScript code that respond to user actions. They can be added directly to HTML elements using event attributes, or they can be attached dynamically using JavaScript.

Adding Event Handlers Directly in HTML

				
					<button onclick="alert('Button clicked!')">Click Me</button>

Explanation

  • The onclick attribute specifies what happens when the button is clicked.
  • In this case, an alert box will pop up saying “Button clicked!”

Adding Event Handlers via JavaScript

				
					<button id="myButton">Click Me</button> <script type="litespeed/javascript">document.getElementById("myButton").onclick=function(){alert('Button clicked!')}</script>

Explanation

  • Instead of adding the event directly in the HTML, we use JavaScript to attach the onclick event to the button element with the id="myButton".

Mouse Events

Mouse events are triggered by actions with the mouse. These include:

  • onclick: Fires when an element is clicked.
  • onmouseover: Fires when the mouse pointer hovers over an element.
  • onmouseout: Fires when the mouse pointer leaves an element.
  • ondblclick: Fires when an element is double-clicked.

Example of Mouse Events

				
					<button id="hoverButton">Hover over me</button> <script type="litespeed/javascript">document.getElementById("hoverButton").onmouseover=function(){this.style.backgroundColor="yellow"};document.getElementById("hoverButton").onmouseout=function(){this.style.backgroundColor=""}</script>

Explanation

  • When the user hovers over the button, the background color changes to yellow.
  • When the mouse leaves the button, the background color reverts.

Output

  • As you hover over the button, its background color will change to yellow. When you move the mouse away, the button returns to its original state.

Keyboard Events

Keyboard events respond to actions made via the keyboard. These include:

  • onkeydown: Fires when a key is pressed down.
  • onkeyup: Fires when a key is released.
  • onkeypress: Fires when a key that produces a character value is pressed.

Example of Keyboard Events

				
					<input type="text" id="myInput" placeholder="Type something here..."> <script type="litespeed/javascript">document.getElementById("myInput").onkeydown=function(event){console.log("Key pressed: "+event.key)}</script>

Explanation

  • Whenever the user presses a key inside the input field, the key that was pressed is logged to the console.

Output

  • Start typing in the input field, and each key you press will be displayed in the browser console.

Form Events

Form events are triggered by interactions with HTML forms. These include:

  • onsubmit: Fires when a form is submitted.
  • onchange: Fires when a form element’s value is changed.
  • oninput: Fires when the user inputs data into a form element.

Example of Form Events

				
					<form id="myForm">
  <input type="text" id="name" placeholder="Enter your name">
  <input type="submit" value="Submit">
</form> <script type="litespeed/javascript">document.getElementById("myForm").onsubmit=function(event){event.preventDefault();alert("Form submitted with name: "+document.getElementById("name").value)}</script>

Explanation

  • The onsubmit event fires when the form is submitted.
  • The form submission is prevented using event.preventDefault() to stop the page from reloading, and an alert shows the entered name.

Output

  • After entering your name and clicking “Submit,” an alert box will show the entered name without reloading the page.

Window Events

Window events occur at the browser window level. These include:

  • onload: Fires when the entire page loads.
  • onresize: Fires when the browser window is resized.
  • onscroll: Fires when the user scrolls the page.

Example of Window Events

				
					<script type="litespeed/javascript">window.onload=function(){alert("Page fully loaded")};window.onresize=function(){console.log("Window resized to: "+window.innerWidth+"x"+window.innerHeight)}</script>

Explanation

  • The onload event triggers when the entire page is loaded, showing an alert.
  • The onresize event triggers whenever the browser window is resized, logging the new dimensions to the console.

Output

  • When the page fully loads, an alert will pop up. If you resize the browser window, the new width and height will be printed in the console.

Event Listeners

In modern JavaScript, a more flexible and recommended way to handle events is by using addEventListener(). This method allows you to attach multiple event handlers to a single element and offers more control.

Example using addEventListener

				
					<button id="clickButton">Click Me</button> <script type="litespeed/javascript">document.getElementById("clickButton").addEventListener("click",function(){alert("Button clicked using addEventListener!")})</script>

Explanation

  • addEventListener attaches a click event to the button.
  • Unlike inline event handlers, addEventListener allows for multiple event listeners on a single element without overwriting previous handlers.

Output

  • When the button is clicked, an alert box will appear saying “Button clicked using addEventListener!”

Preventing Default Actions

Many HTML elements have default behaviors associated with events. For example, submitting a form refreshes the page, and clicking on a link navigates to a new URL. You can prevent these default actions using event.preventDefault().

Example of Preventing Default Actions

				
					<a href="https://example.com" id="myLink" target="_blank" rel="noopener">Go to Example.com</a> <script type="litespeed/javascript">document.getElementById("myLink").addEventListener("click",function(event){event.preventDefault();alert("Default action prevented. No navigation will happen.")})</script>

Explanation

  • Clicking the link would normally navigate to https://example.com. However, event.preventDefault() stops the default behavior, and instead, an alert is shown.

Output

  • Clicking the link won’t navigate to the external site. Instead, the alert box will appear.

Event Propagation and Bubbling

Event propagation is a crucial concept in understanding how events interact within the Document Object Model (DOM). It refers to the way events travel through the DOM tree when a user interacts with an element. This process can be divided into three phases: capturing, target, and bubbling.

Phases of Event Propagation

Capturing Phase

  • The event starts at the root of the DOM tree and travels down to the target element that triggered the event. During this phase, any parent elements of the target can listen for the event.
  • The capturing phase is less commonly used in practice because it requires specifying that the event handler should run during capturing.

Target Phase

  • The event reaches the target element that triggered it. This is where the event can be handled directly.
  • The target phase is where most of the direct interactions occur, and it’s the phase at which the event is primarily processed.

Bubbling Phase

  • After the event has been handled at the target, it bubbles back up through the DOM tree. This means it goes back up to the parent elements, allowing them to respond to the event as well.
  • By default, most events bubble, which means you can attach event handlers to parent elements to respond to events that occur on their child elements.

Bubbling Example

Let’s look at a practical example to illustrate event bubbling. Here’s an HTML structure that includes a div with a nested button:

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Bubbling Example</title><style>.outer {
            padding: 20px;
            background-color: lightblue;
        }
        .inner {
            padding: 10px;
            background-color: coral;
        }</style></head>
<body>
    <div class="outer" id="outerDiv">
        Outer Div
        <div class="inner" id="innerDiv">
            Inner Div
            <button id="myButton">Click Me!</button>
        </div>
    </div> <script type="litespeed/javascript">document.getElementById("outerDiv").addEventListener("click",function(){alert("Outer Div Clicked!")});document.getElementById("innerDiv").addEventListener("click",function(){alert("Inner Div Clicked!")});document.getElementById("myButton").addEventListener("click",function(){alert("Button Clicked!")})</script> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://diginode.in/wp-content/litespeed/js/96d0e6d4ba93134cbdab615e06eb2824.js?ver=a1a89"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>

Explanation

  • There are three main elements: an outer div, an inner div, and a button inside the inner div.
  • Basic styles are added to distinguish between the outer and inner divs visually.
  • Event listeners are added to each of the three elements. Each listener will show an alert when the respective element is clicked.

Output

When you click the button, the following events occur in order:

  1. The Button Clicked! alert appears.
  2. The Inner Div Clicked! alert appears (because the button is inside the inner div).
  3. The Outer Div Clicked! alert appears (because the event bubbles up to the outer div).

Stopping Event Propagation

Sometimes, you may want to prevent the event from bubbling up to parent elements. This can be achieved using the event.stopPropagation() method.

Example of Stopping Propagation

				
					<button id="stopButton">Stop Propagation</button> <script type="litespeed/javascript">document.getElementById("stopButton").addEventListener("click",function(event){alert("Stopping propagation!");event.stopPropagation()});document.getElementById("outerDiv").addEventListener("click",function(){alert("Outer Div Clicked!")})</script>

Explanation

  • Here, a button is added that, when clicked, will alert Stopping propagation! and stop the event from reaching the outer div.
  • If you click this button, you will only see the first alert. The Outer Div Clicked! alert will not appear because the propagation was stopped.

To summarize, we’ve covered a wide array of essential HTML events, including mouse events, keyboard events, form events, and window events. Understanding how to handle these events effectively will empower you to create more interactive web applications that respond dynamically to user input. Happy coding !❤️

Table of Contents

Popular Tutorials

Contact here

Copyright © 2025 Diginode

Made with ❤️ in India

Home
Roadmap
ATS Resume
Playground
Resources