事件冒泡

  1. <div id="box">
  2.         <p id="pp">
  3.             <button id="btn" onclick="clickMe()">点击</button>
  4.         </p>
  5.     </div>
  6.     <script>
  8.         var box = document.querySelector('#box')
  9.         var pp = document.querySelector('#pp')
  10.         var btn = document.querySelector('#btn')
  12.         box.addEventListener('click',function(){ console.log(`div监听了事件`)},false)
  13.         pp.addEventListener('click',function(){ console.log(`pp监听了事件`)},false)
  14.         btn.addEventListener('click',function(){ console.log(`btn监听了事件`)},false)
  16.     </script>

事件捕捉

  1. <style>
  2.         li {
  3.             border: 1px solid;
  4.             margin-top: 10px;
  5.             cursor: pointer;
  6.             width: 100px;
  7.         }
  9.         .on {
  10.             color: red;
  11.         }
  12.     </style>
  13. </head>
  15. <body>
  16.     <ul id="app" onclick="clickLi();">
  17.         <li>1</li>
  18.         <li>2</li>
  19.         <li>3</li>
  20.         <li>4</li>
  21.         <li>5</li>
  22.     </ul>
  24.     <script>
  25.         function clickLi() {
  26.             // console.log(event.target);
  27.             var target = event.target;
  28.             console.log(target);
  29.             if (target.nodeName !== 'LI') return false;
  30.             // 其他的li清除颜色
  31.             var $li = document.querySelector('.on');
  32.             if ($li) {
  33.                 $li.className = ''
  34.             }
  35.             // 被点击的li改变颜色
  36.             target.className = 'on';
  37.         }