|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | + <head> |
| 4 | + <meta charset="UTF-8" /> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 6 | + <title>Form Validation</title> |
| 7 | + </head> |
| 8 | + <style> |
| 9 | + .grand-parent { |
| 10 | + background-color: rgb(2, 147, 250); |
| 11 | + padding: 18px; |
| 12 | + margin: 10px; |
| 13 | + border: 1px solid black; |
| 14 | + cursor: pointer; |
| 15 | + } |
| 16 | + |
| 17 | + .parent { |
| 18 | + background-color: rgb(52, 170, 254); |
| 19 | + padding: 18px; |
| 20 | + margin: 10px; |
| 21 | + border: 1px solid black; |
| 22 | + cursor: pointer; |
| 23 | + } |
| 24 | + |
| 25 | + .child { |
| 26 | + background-color: rgb(109, 194, 255); |
| 27 | + padding: 18px; |
| 28 | + margin: 10px; |
| 29 | + border: 1px solid black; |
| 30 | + cursor: pointer; |
| 31 | + } |
| 32 | + </style> |
| 33 | + <body> |
| 34 | + <header> |
| 35 | + <h1>Event Propagation</h1> |
| 36 | + </header> |
| 37 | + <div class="grand-parent" data-container="grand-parent"> |
| 38 | + Grand parent |
| 39 | + <div class="parent" data-container="parent"> |
| 40 | + Parent |
| 41 | + <div class="child" data-container="child">Child</div> |
| 42 | + </div> |
| 43 | + </div> |
| 44 | + <!-- |
| 45 | + * Event propagation is a mechanism in JavaScript that controls how events are handled in the Document Object Model (DOM) tree |
| 46 | + * Event propagation, also known as event bubbling and event capturing, is a mechanism in the DOM (Document Object Model) where events triggered on an HTML element are propagated through its ancestors or descendants in the DOM tree. |
| 47 | + There are two main phases of event propagation: |
| 48 | +
|
| 49 | + * Capturing phase: During this phase, the event is captured from the top of the DOM hierarchy down to the target element. This means that events are first triggered on the outermost ancestor and then propagate downwards towards the target element. |
| 50 | +
|
| 51 | + * Bubbling phase: After the event reaches the target element, it starts to bubble up through the ancestors of the target element, from the target element itself up to the outermost ancestor. |
| 52 | +
|
| 53 | + * Event propagation allows for handling events at different levels of the DOM hierarchy. By attaching event listeners to parent elements, you can capture events that occur on their descendant elements. |
| 54 | +
|
| 55 | + * This is useful for event delegation, where instead of attaching event listeners to individual elements, you can attach them to a common ancestor and handle events for multiple elements efficiently. |
| 56 | + --> |
| 57 | + |
| 58 | + <script> |
| 59 | + const grandParentEl = document.querySelector('.grand-parent') |
| 60 | + const parentEl = document.querySelector('.parent') |
| 61 | + const childEl = document.querySelector('.child') |
| 62 | + |
| 63 | + grandParentEl.addEventListener('click', e => { |
| 64 | + const containerValue = grandParentEl.getAttribute('data-container') |
| 65 | + alert(containerValue) |
| 66 | + }) |
| 67 | + |
| 68 | + parentEl.addEventListener('click', e => { |
| 69 | + const containerValue = parentEl.getAttribute('data-container') |
| 70 | + alert(containerValue) |
| 71 | + }) |
| 72 | + |
| 73 | + childEl.addEventListener('click', e => { |
| 74 | + const containerValue = childEl.getAttribute('data-container') |
| 75 | + alert(containerValue) |
| 76 | + }) |
| 77 | + |
| 78 | + // const handleClick = (containerType, e) => { |
| 79 | + // const currentContainerType = |
| 80 | + // containerType.getAttribute('data-container') |
| 81 | + // alert(currentContainerType) |
| 82 | + // } |
| 83 | + </script> |
| 84 | + </body> |
| 85 | +</html> |
0 commit comments