flâneur

How Event Propagation and Delegation Work in JavaScript - DEV Community

dev.to · 1,366 words · saved by 1 readers

For the reader to understand this article, it is important to have at least a basic knowledge of HTML, CSS and JavaScript. In JavaScript, events travel to and fro the Document Object Model(Dom) tree. This is generally known as event propagation, which comes in two phases: capturing and bubbling. The fact that events pass through the parent element of the target element that triggered such events can then help you to decide where to handle these events. This is known as event delegation. In this article, you will learn how event propagation and delegation work in JavaScript and how to effectively use them to handle events on your page. JavaScript events are actions or occurrences that trigger certain behavior on a page. Developers can then listen for these events in JavaScript by attaching a function known as Event Listeners. Examples of events in JavaScript include; a click event, where a user clicks on an element in a web page; a submit event, in cases where a user submits a form, pag

Table of Contents Introduction What are events? Event propagation The capturing phase of event propagation The bubbling phase of event propagation Event .stopPropagation method Event delegation How to use event delegation in JavaScript Conclusion Prerequisite For the reader to understand this article, it is important to have at least a basic knowledge of HTML, CSS and JavaScript. Introduction In JavaScript, events travel to and fro the Document Object Model(Dom) tree. This is generally known as event propagation, which comes in two phases: capturing and bubbling. The fact that events pass thro

saved by

related reading