Skip to content

Commit cd5bee2

Browse files
AnkitKumarMishra5AnkitKumarMishra5
committed
JavaScript: Event Propagation: Capturing and Bubbling
1 parent 77abdc2 commit cd5bee2

1 file changed

Lines changed: 73 additions & 3 deletions

File tree

‎JavaScript/EventListener.html‎

Lines changed: 73 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,39 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Event Listener</title>
7+
<style>
8+
div {
9+
padding: 1em;
10+
margin: 1em;
11+
}
12+
13+
#grandparent {
14+
background-color: cadetblue;
15+
}
16+
17+
#parent {
18+
background-color: aquamarine;
19+
}
20+
21+
#child {
22+
background-color: azure;
23+
}
24+
</style>
725
</head>
826
<body>
927
<!-- <input type="range" min="0" max="240" id="range-input" style="position: fixed; top: 0;"> -->
1028

11-
<input type="text" id="test-input" autocomplete="off">
29+
<!-- <input type="text" id="test-input" autocomplete="off"> -->
1230

13-
14-
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente, quaerat eveniet. Cupiditate nihil ipsa consectetur inventore eius pariatur voluptate dignissimos. Hic, nulla eligendi sequi recusandae cum nemo fuga veniam et? Voluptates voluptatum iure soluta atque assumenda molestias exercitationem aut optio ut. Nihil debitis explicabo in alias eius et optio quae quod assumenda dolores, sequi error rem quam excepturi ratione beatae? Molestiae sit, voluptatibus enim voluptate quisquam, nulla illo incidunt iste rerum cupiditate sapiente distinctio omnis quos blanditiis sed quasi consequuntur hic culpa rem deleniti nobis asperiores. Ut illum modi magnam fugiat dicta expedita aliquid optio sed aliquam assumenda? Neque voluptatum ipsam at repudiandae illum eum, enim, suscipit quas quibusdam necessitatibus aspernatur vel autem delectus recusandae omnis quae voluptates? Sint quibusdam suscipit atque eligendi totam, porro possimus cum harum corporis facilis veritatis similique voluptates quisquam earum id dolore magnam omnis ipsa doloribus nemo. Dolor eligendi, quod molestiae dolorum consequuntur nisi quidem ex facilis cumque modi dignissimos eum asperiores nihil voluptatum! Magnam praesentium earum quia fugit, molestiae cupiditate iure sapiente! Tempore, temporibus? Dolorem rem provident, similique est quod repudiandae repellendus optio libero officia aliquid blanditiis reprehenderit, a maiores illo hic repellat suscipit, rerum sunt. Adipisci aspernatur enim cumque odit blanditiis inventore magni excepturi, animi iste consectetur dolorem esse ullam illum laborum quam quas magnam veritatis facere! Blanditiis cumque voluptas, in veritatis vitae, unde saepe et nulla voluptates consequatur commodi optio deserunt ratione officiis perferendis quo vero magni tempore nemo quasi? Pariatur voluptas sapiente facilis veritatis odit itaque molestias non mollitia minima? Saepe aliquam, fuga recusandae magnam rem, dolor, corporis similique ducimus porro iste sapiente cum! Illum provident reiciendis ratione doloribus unde suscipit pariatur beatae quis non quia accusamus voluptates inventore, dicta deleniti iste culpa quam libero cumque quos ipsa, tempore quasi cum repellendus officia? Distinctio sunt soluta unde quaerat architecto mollitia beatae reprehenderit excepturi minus. Fugiat, eaque vitae! Ea expedita velit temporibus nobis incidunt impedit, ullam neque iusto vero provident sapiente similique dolore numquam dignissimos hic, officiis minima minus! Totam omnis optio dolorum est. Quam et repellat doloremque reprehenderit quos dicta cum vel magnam deleniti? Eos at, ipsa id tenetur praesentium neque voluptas hic perspiciatis minima amet dolor temporibus. Corporis itaque ratione possimus saepe sint eum ad ipsum id laborum dolorem doloribus libero, velit at harum. Laudantium corporis in sint quam placeat dolores rerum maxime ad debitis cumque! Dolorum officiis, commodi temporibus et id provident suscipit voluptate voluptatum dolor placeat nemo aliquid perferendis non, corrupti quis odit in velit illum ratione earum eum? Incidunt maxime molestiae nesciunt obcaecati necessitatibus! Minus magnam alias officiis rem! Dolore obcaecati quae tenetur tempora magnam iusto maiores et est, odio nobis veritatis accusamus voluptates necessitatibus reiciendis consequatur cumque deleniti vel eius tempore omnis praesentium. Doloribus magni laboriosam odit, dolorem fugiat repudiandae dicta atque expedita earum quod tenetur iusto, quasi accusantium alias sit repellat, nostrum voluptates quaerat debitis velit ab non ipsa obcaecati tempore. Explicabo quod, fugiat quas consequatur odio sapiente, voluptatum eaque possimus natus totam necessitatibus iusto quia accusamus veritatis, ex temporibus in nostrum ullam corrupti. Velit.</p>
31+
<div id="grandparent">
32+
GRANDPARENT
33+
<div id="parent">
34+
PARENT
35+
<div id="child">
36+
CHILD
37+
</div>
38+
</div>
39+
</div>
1540

1641
<script>
1742
/*
@@ -85,6 +110,51 @@
85110
// console.log('SCROLLED', window.scrollY)
86111
// // document.getElementById('range-input').value = window.scrollY
87112
// })
113+
114+
115+
/* --------------------------------------- */
116+
/*
117+
# Event Propagation: Process by which events are handled and propagated through the DOM tree (Applicable for nested elements)
118+
- 2 phases
119+
- Event capturing: Event is propagated from last ancestor to the child node and so on till the target element
120+
- Event bubbling ***: Event is propagated from target node to the parent node and so on till the last ancestor element
121+
122+
- Stop event propagation
123+
- event.stopPropagation()
124+
*/
125+
126+
const grandparent = document.getElementById('grandparent')
127+
const parent = document.getElementById('parent')
128+
const child = document.getElementById('child')
129+
130+
131+
// Bubbling Phase
132+
// grandparent.addEventListener('click', (event) => {
133+
// console.log('GRANDPARENT CLICKED')
134+
// })
135+
136+
// parent.addEventListener('click', (event) => {
137+
// console.log('PARENT CLICKED')
138+
// event.stopPropagation()
139+
// })
140+
141+
// child.addEventListener('click', (event) => {
142+
// console.log('CHILD CLICKED')
143+
// event.stopPropagation()
144+
// })
145+
146+
// Capturing Phase
147+
// grandparent.addEventListener('click', (event) => {
148+
// console.log('GRANDPARENT CLICKED')
149+
// }, true)
150+
151+
// parent.addEventListener('click', (event) => {
152+
// console.log('PARENT CLICKED')
153+
// }, true)
154+
155+
// child.addEventListener('click', (event) => {
156+
// console.log('CHILD CLICKED')
157+
// }, true)
88158
</script>
89159
</body>
90160
</html>

0 commit comments

Comments
 (0)