javascript/eventPropagation.html at main · Mokesh-s/javascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
  <head>
    <style>
      div {
        min-width: 100px;
        min-height: 100px;
        border: 1px solid;
        padding: 50px;
      }
    </style>
  </head>
  <body>
    <div id='grand-parent'>
        <div id='parent'>
            <div id='grand-child'></div>
        </div>
    </div>
    <script>
      // if third paramater is flase events will events bubble up
      // if third parameter is true events will events capture down
      document.querySelector('#grand-parent')
      .addEventListener('click', (e) => {
        console.log('grand-parent is clicked')
      }, true)
      document.querySelector('#parent')
      .addEventListener('click', (e) => {
        e.stopPropagation()
        console.log('parent is clicked')
      }, true)
      document.querySelector('#grand-child')
      .addEventListener('click', (e) => {
        console.log('grand child is clicked')
      }, true)
    </script>
  </body>
</html>