addEventListener()<\/code>, event bubbling and capturing, event delegation, and asynchronous event handling.<\/p>\n\n\n\nQuick Answer:<\/strong> <\/h2>\n\n\n\nJavaScript events are actions such as clicks, keypresses, form submissions or mouse movements that trigger specific code in a web page.<\/p>\n\n\n\n
\naddEventListener()<\/code> attaches event handlers to elements.<\/li>\n\n\n\n- Common events include
click<\/code>, submit<\/code>, keydown<\/code> and mouseover<\/code>.<\/li>\n\n\n\n- Event bubbling moves from child to parent elements.<\/li>\n\n\n\n
- Event capturing moves from parent to child elements.<\/li>\n\n\n\n
- Event delegation handles multiple child elements with one parent listener.<\/li>\n<\/ul>\n\n\n\n
What Is a JavaScript Event?<\/strong><\/h2>\n\n\n\n![\"\"](\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2026\/09\/image-339-1200x630.png\" "\\"\\"")
<\/figure>\n\n\n\nA JavaScript event is an action or occurrence detected by the browser that can trigger a specific piece of code.<\/p>\n\n\n\n
Events can be caused by user interactions such as:<\/p>\n\n\n\n
\n- Clicking a button<\/li>\n\n\n\n
- Pressing a key<\/li>\n\n\n\n
- Submitting a form<\/li>\n\n\n\n
- Moving the mouse<\/li>\n\n\n\n
- Focusing on an input field<\/li>\n<\/ul>\n\n\n\n
They can also be triggered by the browser itself, such as when a page finishes loading.<\/p>\n\n\n\n
For example:<\/p>\n\n\n\n
User clicks a button\n\u2192 Browser detects the click event\n\u2192 Event listener runs\n\u2192 JavaScript executes the required action\n<\/code><\/pre>\n\n\n\nEvents in JavaScript<\/a> are handled through event handlers or event listeners. These are functions that tell JavaScript what should happen when a specific event occurs.<\/p>\n\n\n\nIn simple terms:<\/p>\n\n\n\n
Event \u2192 Action occurs<\/strong><\/p>\n\n\n\nEvent listener \u2192 Detects the action<\/strong><\/p>\n\n\n\nEvent handler \u2192 Runs the required code<\/strong><\/p>\n\n\n\nThis event-driven behaviour is what makes websites respond dynamically instead of behaving like static pages.<\/p>\n\n\n\n
Also, Find Out the<\/strong> Best JavaScript Roadmap Beginners Should Follow<\/strong><\/a><\/p>\n\n\n\nHow Do JavaScript Events Work?<\/strong><\/h2>\n\n\n\n![\"\"](\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2026\/09\/image-340-1200x630.png\" "\\"\\"")
<\/figure>\n\n\n\nHere\u2019s a simplified breakdown of how events work in JavaScript:<\/p>\n\n\n\n
1. Event Triggering<\/strong><\/h3>\n\n\n\nAn event occurs when a user or the browser performs an action.<\/p>\n\n\n\n
Examples include:<\/p>\n\n\n\n
\n- Clicking a button<\/li>\n\n\n\n
- Typing in an input field<\/li>\n\n\n\n
- Hovering over an element<\/li>\n\n\n\n
- Submitting a form<\/li>\n\n\n\n
- Loading a page<\/li>\n<\/ul>\n\n\n\n
2. Event Listening<\/strong><\/h3>\n\n\n\nJavaScript needs to know which event it should watch for.<\/p>\n\n\n\n
This is usually done with addEventListener()<\/code>.<\/p>\n\n\n\nbutton.addEventListener(\"click\", handleClick);\n<\/code><\/pre>\n\n\n\nHere, JavaScript listens for a click<\/code> event on the button.<\/p>\n\n\n\n3. Event Handling<\/strong><\/h3>\n\n\n\nWhen the event occurs, JavaScript runs the associated event handler function.<\/p>\n\n\n\n
function handleClick() {\n console.log(\"Button clicked\");\n}\n<\/code><\/pre>\n\n\n\nThe handler contains the code that should execute in response to the event.<\/p>\n\n\n\n
4. Event Execution<\/strong><\/h3>\n\n\n\nOnce the event is detected, the browser executes the handler and updates the page or performs the required action.<\/p>\n\n\n\n
The complete flow looks like:<\/p>\n\n\n\n
User action\n\u2192 Event triggered\n\u2192 Event listener detects it\n\u2192 Event handler runs\n\u2192 Page responds\n<\/code><\/pre>\n\n\n\nFor example:<\/p>\n\n\n\n
User clicks \"Submit\"\n\u2192 submit event fires\n\u2192 listener detects the event\n\u2192 validation function runs\n\u2192 form is submitted or an error is shown\n<\/code><\/pre>\n\n\n\nUnderstanding this event flow is essential for building interactive web applications because it allows JavaScript to respond dynamically to user actions and browser activity.<\/p>\n\n\n\n
Also Read: 42 JavaScript Questions Towards Better Interviews<\/a><\/strong><\/p>\n\n\n\nHow to Create an Event in JavaScript?<\/strong><\/h2>\n\n\n\n![\"\"](\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2026\/09\/image-341-1200x630.png\" "\\"\\"")
<\/figure>\n\n\n\nJavaScript<\/a> can respond to built-in browser events such as click<\/code> and keydown<\/code>, but developers can also create and dispatch their own custom events.<\/p>\n\n\n\nThe modern approach uses the Event()<\/code> or CustomEvent()<\/code> constructor along with dispatchEvent()<\/code>.<\/p>\n\n\n\nStep 1: Create the Event<\/strong><\/h3>\n\n\n\nCreate a new event object and give it a descriptive event type.<\/p>\n\n\n\n
const customEvent = new Event(\"customEvent\", {\n bubbles: true,\n cancelable: true\n});\n<\/code><\/pre>\n\n\n\nHere:<\/p>\n\n\n\n
\ncustomEvent<\/code> is the event type.<\/li>\n\n\n\nbubbles: true<\/code> allows the event to move upward through the DOM.<\/li>\n\n\n\ncancelable: true<\/code> allows its default behaviour to be cancelled when applicable.<\/li>\n<\/ul>\n\n\n\nStep 2: Select the Target Element<\/strong><\/h3>\n\n\n\nChoose the element where the event should originate.<\/p>\n\n\n\n
const targetElement = document.getElementById(\"targetElement\");\n<\/code><\/pre>\n\n\n\nStep 3: Dispatch the Event<\/strong><\/h3>\n\n\n\nUse dispatchEvent()<\/code> to trigger the custom event.<\/p>\n\n\n\ntargetElement.dispatchEvent(customEvent);\n<\/code><\/pre>\n\n\n\nComplete Example<\/strong><\/h3>\n\n\n\n<button id=\"targetElement\">Trigger Event<\/button>\n\n<script>\nconst targetElement = document.getElementById(\"targetElement\");\n\ntargetElement.addEventListener(\"customEvent\", function () {\n console.log(\"Custom event triggered\");\n});\n\nconst customEvent = new Event(\"customEvent\", {\n bubbles: true,\n cancelable: true\n});\n\ntargetElement.dispatchEvent(customEvent);\n<\/script>\n<\/code><\/pre>\n\n\n\nThe complete flow is:<\/p>\n\n\n\n
Create event\n\u2192 Select target\n\u2192 Attach listener\n\u2192 Dispatch event\n\u2192 Event handler runs\n<\/code><\/pre>\n\n\n\nIf you need to pass additional information with an event, use CustomEvent()<\/code>.<\/p>\n\n\n\nconst userEvent = new CustomEvent(\"userLogin\", {\n detail: {\n username: \"Vaishali\"\n }\n});\n\ndocument.dispatchEvent(userEvent);\n<\/code><\/pre>\n\n\n\nThe additional information can then be accessed through event.detail<\/code>.<\/p>\n\n\n\ndocument.addEventListener(\"userLogin\", function (event) {\n console.log(event.detail.username);\n});\n<\/code><\/pre>\n\n\n\nCustom events are useful when different components of an application need to communicate without being tightly connected.<\/p>\n\n\n\n
Also R<\/strong><\/em>ead:<\/strong> The Beginner\u2019s Guide To Closures In JavaScript<\/strong><\/a><\/p>\n\n\n\nNow that you understand how events can be created and dispatched, the next step is learning the event types you will use most often in web applications.<\/p>\n\n\n\n
Types of Events in JavaScript<\/strong><\/h2>\n\n\n\n![\"\"](\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2026\/09\/image-342-1200x630.png\" "\\"\\"")
<\/figure>\n\n\n\nJavaScript supports many browser and user-generated events. The following are some of the most commonly used events in frontend development.<\/p>\n\n\n\n
1. Click Event<\/strong><\/h3>\n\n\n\nThe click<\/code> event occurs when a user clicks an element.<\/p>\n\n\n\nIt is commonly used for:<\/p>\n\n\n\n
\n- Buttons<\/li>\n\n\n\n
- Menus<\/li>\n\n\n\n
- Modals<\/li>\n\n\n\n
- Navigation<\/li>\n\n\n\n
- Interactive cards<\/li>\n<\/ul>\n\n\n\n
Example:<\/strong><\/p>\n\n\n\n<button id=\"myButton\">Click Me<\/button>\n\n<script>\nconst button = document.getElementById(\"myButton\");\n\nbutton.addEventListener(\"click\", function () {\n console.log(\"Button clicked\");\n});\n<\/script>\n<\/code><\/pre>\n\n\n\n2. Submit Event<\/strong><\/h3>\n\n\n\nThe submit<\/code> event occurs when a form is submitted.<\/p>\n\n\n\nIt is commonly used for:<\/p>\n\n\n\n
\n- Form validation<\/li>\n\n\n\n
- Login forms<\/li>\n\n\n\n
- Registration<\/li>\n\n\n\n
- Search forms<\/li>\n\n\n\n
- Sending data to APIs<\/li>\n<\/ul>\n\n\n\n
Example:<\/strong><\/p>\n\n\n\n<form id=\"signupForm\">\n <input type=\"text\" id=\"name\" required>\n <button type=\"submit\">Submit<\/button>\n<\/form>\n\n<script>\nconst form = document.getElementById(\"signupForm\");\n\nform.addEventListener(\"submit\", function (event) {\n event.preventDefault();\n\n const name = document.getElementById(\"name\").value;\n\n console.log(\"Submitted by:\", name);\n});\n<\/script>\n<\/code><\/pre>\n\n\n\nevent.preventDefault()<\/code> prevents the browser from performing its normal form submission.<\/p>\n\n\n\n3. Keydown Event<\/strong><\/h3>\n\n\n\nThe keydown<\/code> event fires when the user presses a keyboard key.<\/p>\n\n\n\nIt is useful for:<\/p>\n\n\n\n
\n- Keyboard shortcuts<\/li>\n\n\n\n
- Search boxes<\/li>\n\n\n\n
- Games<\/li>\n\n\n\n
- Form navigation<\/li>\n\n\n\n
- Enter and Escape key handling<\/li>\n<\/ul>\n\n\n\n
Example:<\/strong><\/p>\n\n\n\n<input id=\"searchInput\" type=\"text\" placeholder=\"Search\">\n\n<script>\nconst input = document.getElementById(\"searchInput\");\n\ninput.addEventListener(\"keydown\", function (event) {\n console.log(\"Key pressed:\", event.key);\n\n if (event.key === \"Enter\") {\n console.log(\"Search started\");\n }\n});\n<\/script>\n<\/code><\/pre>\n\n\n\n4. Mouseover Event<\/strong><\/h3>\n\n\n\nThe mouseover<\/code> event fires when the pointer enters an element or one of its child elements.<\/p>\n\n\n\nIt is commonly used for:<\/p>\n\n\n\n
\n- Tooltips<\/li>\n\n\n\n
- Dropdown menus<\/li>\n\n\n\n
- Hover previews<\/li>\n\n\n\n
- Image effects<\/li>\n\n\n\n
- Interactive cards<\/li>\n<\/ul>\n\n\n\n
Example:<\/strong><\/p>\n\n\n\n<div id=\"card\">Hover over me<\/div>\n\n<script>\nconst card = document.getElementById(\"card\");\n\ncard.addEventListener(\"mouseover\", function () {\n card.textContent = \"Mouse detected\";\n});\n<\/script>\n<\/code><\/pre>\n\n\n\n5. Load Event<\/strong><\/h3>\n\n\n\nThe load<\/code> event fires when a page or resource has finished loading.<\/p>\n\n\n\nExample:<\/strong><\/p>\n\n\n\nwindow.addEventListener(\"load\", function () {\n console.log(\"Page loaded\");\n});\n<\/code><\/pre>\n\n\n\nIt can be useful when code depends on assets being completely available.<\/p>\n\n\n\n
6. Focus Event<\/strong><\/h3>\n\n\n\nThe focus<\/code> event occurs when an element receives focus.<\/p>\n\n\n\nExample:<\/strong><\/p>\n\n\n\n<input id=\"email\" type=\"email\">\n\n<script>\nconst email = document.getElementById(\"email\");\n\nemail.addEventListener(\"focus\", function () {\n email.style.backgroundColor = \"lightblue\";\n});\n<\/script>\n<\/code><\/pre>\n\n\n\nIt is commonly used for:<\/p>\n\n\n\n
\n- Input highlighting<\/li>\n\n\n\n
- Form guidance<\/li>\n\n\n\n
- Validation<\/li>\n\n\n\n
- Accessibility improvements<\/li>\n<\/ul>\n\n\n\n
Also Read:<\/strong> 7 Best Reasons to Learn JavaScript | 1 Bonus Point<\/strong><\/a><\/p>\n\n\n\nUnderstanding individual event types is only part of event handling. You also need to understand how an event moves through the DOM after it occurs.<\/p>\n\n\n\n
JavaScript Event Phases<\/strong><\/h2>\n\n\n\nA DOM event normally passes through three phases:<\/p>\n\n\n\n
Capturing\n\u2192 Target\n\u2192 Bubbling\n<\/code><\/pre>\n\n\n\n1. Event Capturing<\/strong><\/h3>\n\n\n\nEvent capturing<\/a> is the phase where an event travels from the outermost ancestor toward the element that triggered it.<\/p>\n\n\n\nConsider:<\/p>\n\n\n\n
<div id=\"parent\">\n <button id=\"child\">Click Me<\/button>\n<\/div>\n<\/code><\/pre>\n\n\n\nDuring capturing:<\/p>\n\n\n\n
document\n \u2193\nbody\n \u2193\nparent\n \u2193\nbutton\n<\/code><\/pre>\n\n\n\nCapturing can be enabled with:<\/p>\n\n\n\n
parent.addEventListener(\n \"click\",\n function () {\n console.log(\"Parent capturing\");\n },\n { capture: true }\n);\n<\/code><\/pre>\n\n\n\nYou can learn more about the complete event flow<\/a> in the DOM.<\/p>\n\n\n\n2. Event Targeting<\/strong><\/h3>\n\n\n\nThe target phase occurs when the event reaches the element that originally triggered it.<\/p>\n\n\n\n
For example, if a user clicks:<\/p>\n\n\n\n
<button id=\"child\">Click Me<\/button>\n<\/code><\/pre>\n\n\n\nthe button becomes the event.target<\/code>.<\/p>\n\n\n\nchild.addEventListener(\"click\", function (event) {\n console.log(event.target);\n});\n<\/code><\/pre>\n\n\n\n3. Event Bubbling<\/strong><\/h3>\n\n\n\nEvent bubbling<\/a> occurs after the target phase.<\/p>\n\n\n\nThe event travels upward through the element’s ancestors.<\/p>\n\n\n\n
button\n \u2191\nparent\n \u2191\nbody\n \u2191\ndocument\n<\/code><\/pre>\n\n\n\nBubbling is the default behaviour for many common DOM events and is the foundation of event delegation.<\/p>\n\n\n\n