Javascript Lezione 61

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table, tr, td {border: 1px solid black;}
  </style>
</head>
<body>
  <table id="table">
    <tbody id="tbody">
      <tr>
        <td>cella 11</td>
        <td>cella 12</td>
        <td>cella 13</td>
      </tr>
      <tr id="tr">
        <td>cella 21</td>
        <td id="target">cella 21</td>
        <td>cella 23</td>
      </tr>
    </tbody>
  </table>

  <br><br>

  <ul id="lista">
    <li>xxxx</li>
    <li>xxxx</li>
    <li>xxxx</li>
    <li>xxxx</li>
    <li>xxxx</li>
    <li>xxxx</li>
    <li>xxxx</li>
  </ul>

  <script>
    // Array.from(document.getElementById('lista').children)
    //  .forEach( element => element.addEventListener('click', function () {this.style.color='red';}));

     document.getElementById('lista')
       .addEventListener('click', function (event) {event.target.style.color='red';});


    // window.addEventListener('click', _ => console.log('window, fase capture'), true);

    // document.addEventListener('click', _ => console.log('document, fase capture'), true);

    // document.body.addEventListener('click', _ => console.log('body, fase capture'), true);

    // document.getElementById('table')
    //  .addEventListener('click', function() {console.log(`table, fase capture ${this.id}`);}, true);

    // document.getElementById('tbody')
    //  .addEventListener('click', (event) => console.log(`tbody, fase capture ${event.target.textContent}`), true);

    // document.getElementById('tr')
    //  .addEventListener('click', _ => console.log('tr, fase capture'), true);

    document.getElementById('target')
     .addEventListener('click', _ => {console.log('target, fase bubbling'); event.stopImmediatePropagation();});

    document.getElementById('target')
     .addEventListener('click', _ => {console.log('target, fase bubbling 2'); });


    window.addEventListener('click', _ => console.log('window, fase bubbling'));

    document.addEventListener('click', _ => console.log('document, fase bubbling'));

    document.body.addEventListener('click', _ => console.log('body, fase bubbling'));

    document.getElementById('table')
     .addEventListener('click', _ => {console.log('table, fase bubbling');});

    document.getElementById('tbody')
    .addEventListener('click', (event) => console.log('tbody, fase bubbling'));

    document.getElementById('tr')
     .addEventListener('click', _ => console.log('tr, fase bubbling'));


  </script>
</body>
</html>