一、事件委托

  1. 基于事件的冒泡传播机制完成
  2. 如果一个容器中很多元素都要在触发某一事件的时候做一些事情（原始方案：给元素的每一个都单独进行事件绑定），我们只需要给当前容器的这个事件行为绑定方法，这样不论是触发后代中哪一个元素的相关事件行为，由于冒泡传播机制，当前容器绑定的方法也都要被触发执行
  3. 想知道点击的是谁（根据是谁做不同的事情），只需要基于事件对象中的 ev.target 事件源获取既可。
  4. 基于事件委托实现，整体性能要比一个个的绑定方法高出50%左右
  5. 如果多元素触发，业务逻辑是属于一体的，基于事件委托来处理更加好
  6. 某些业务场景只能基于事件委托处理
  7. 在真实项目中，如果要操作的元素是基于 JS 动态绑定的，那么“相关事件行为触发做些事情”的处理操作，我们尽可能基于事件委托来处理（事件委托可以给动态绑定的元素绑定事件）

二、基于事件委托来实现某些功能

案例1

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>事件委托</title>
  6.     <!-- IMPORT CSS -->
  7.     <link rel="stylesheet" href="css/reset.min.css">
  8.     <style>
  9.         .container {
  10.             margin: 20px auto;
  11.             width: 200px;
  12.         }
  14.         .container .box {
  15.             box-sizing: border-box;
  16.             float: right;
  17.             width: 100px;
  18.             height: 35px;
  19.             line-height: 35px;
  20.             text-align: center;
  21.             font-size: 16px;
  22.             border: 1px solid #AAA;
  23.             position: relative;
  24.             top: 1px;
  25.         }
  27.         .container .detail {
  28.             display: none;
  29.             box-sizing: border-box;
  30.             float: right;
  31.             width: 200px;
  32.             height: 70px;
  33.             line-height: 70px;
  34.             text-align: center;
  35.             font-size: 14px;
  36.             border: 1px solid #AAA;
  37.         }
  38.     </style>
  39. </head>
  41. <body>
  42.     <div class="container clearfix">
  43.         <div class="box"><span>购物车</span></div>
  44.         <div class="detail">
  45.             暂无购物车内容
  46.         </div>
  47.     </div>
  48.     <!-- IMPORT JS -->
  49.     <script>
  50.         let box = document.querySelector('.box'),
  51.             detail = document.querySelector('.detail');
  52.         document.onmouseover = function (ev) {
  53.             let target = ev.target;
  54.             if (target.tagName === "SPAN") {
  55.                 // 如果事件源是 SPAN，我们让其变为其父元素
  56.                 target = target.parentNode;
  57.             } 
  58.             if (/^(box|detail)$/.test(target.className)) {
  59.                 // 如果事件源的 CLASS 是 BOX / DETAIL
  60.                 detail.style.display = 'block';
  61.                 return;
  62.             }
  63.             detail.style.display = 'none';
  64.         }
  66.         /* 
  67.         box.onmouseover = function (ev) {
  68.             detail.style.display = 'block';
  69.         }
  70.         box.onmouseout = function (ev) {
  71.             detail.style.display = 'none';
  72.         }
  73.         detail.onmouseover = function (ev) {
  74.             detail.style.display = 'block';
  75.         }
  76.         detail.onmouseout = function (ev) {
  77.             detail.style.display = 'none';
  78.         } 
  79.         */
  80.     </script>
  81. </body>
  82. </html>

案例2

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>事件委托</title>
  7.     <!-- IMPORT CSS -->
  8.     <link rel="stylesheet" href="css/reset.min.css">
  9.     <style>
  10.         .container {
  11.             margin: 20px auto;
  12.             width: 200px;
  13.         }
  15.         .container .box {
  16.             box-sizing: border-box;
  17.             float: right;
  18.             width: 100px;
  19.             height: 35px;
  20.             line-height: 35px;
  21.             text-align: center;
  22.             font-size: 16px;
  23.             border: 1px solid #AAA;
  24.             position: relative;
  25.             top: 1px;
  26.         }
  28.         .container .detail {
  29.             display: none;
  30.             box-sizing: border-box;
  31.             float: right;
  32.             width: 200px;
  33.             height: 70px;
  34.             line-height: 70px;
  35.             text-align: center;
  36.             font-size: 14px;
  37.             border: 1px solid #AAA;
  38.         }
  39.     </style>
  40. </head>
  42. <body>
  43.     <div class="container clearfix">
  44.         <div class="box"><span>购物车</span></div>
  45.         <div class="detail">
  46.             暂无购物车内容
  47.         </div>
  48.     </div>
  49.     <!-- IMPORT JS -->
  50.     <script>
  51.         let box = document.querySelector('.box'),
  52.             detail = document.querySelector('.detail');
  53.         document.onclick = function (ev) {
  54.             /* let target = ev.target;
  55.             target.tagName === "SPAN" ? target = target.parentNode : null;
  56.             if (/^box$/.test(target.className)) {
  57.                 // 如果是 BOX 让其显示
  58.                 detail.style.display = 'block';
  59.                 return;
  60.             } */
  61.             /* if (/^detail$/.test(target.className)) {
  62.                 //=>如果是DETAIL啥也不干
  63.                 return;
  64.             } */
  65.             // 剩下的都是隐藏
  66.             detail.style.display = 'none';
  67.         }
  68.         box.onclick = function (ev) {
  69.             // 如果是 BOX 让其显示
  70.             detail.style.display = 'block';
  71.             ev.stopPropagation();
  72.         }
  73.         detail.onclick = function (ev) {
  74.             // 如果是 DETAIL 啥也不干
  75.             ev.stopPropagation();
  76.         }
  77.     </script>
  78. </body>
  79. </html>

案例3

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>事件委托</title>
  6.     <!-- IMPORT CSS -->
  7.     <link rel="stylesheet" href="css/reset.min.css">
  8.     <style>
  9.         .box {
  10.             margin: 20px auto;
  11.             width: 200px;
  12.         }
  14.         .newsList {
  15.             box-sizing: border-box;
  16.             padding: 5px;
  17.             border: 2px solid lightcoral;
  18.         }
  20.         .newsList li {
  21.             line-height: 35px;
  22.             border-bottom: 1px dashed #BBB;
  23.         }
  25.         .createBtn {
  26.             box-sizing: border-box;
  27.             margin-top: 10px;
  28.             width: 80px;
  29.             height: 30px;
  30.             border: 1px solid #AAA;
  31.         }
  32.     </style>
  33. </head>
  35. <body>
  36.     <div class="box">
  37.         <ul class="newsList">
  38.             <li>我是第1个LI</li>
  39.             <li>我是第2个LI</li>
  40.             <li>我是第3个LI</li>
  41.             <li>我是第4个LI</li>
  42.             <li>我是第5个LI</li>
  43.         </ul>
  44.         <button class="createBtn">新增</button>
  45.     </div>
  47.     <!-- IMPORT JS -->
  48.     <script src="js/jquery.min.js"></script>
  49.     <script>
  50.         let $newsList = $('.newsList'),
  51.             $createBtn = $('.createBtn'),
  52.             count = 5;
  53.         $newsList.click(function (ev) {
  54.             let target = ev.target,
  55.                 $target = $(target);
  56.             if (target.tagName === 'LI') {
  57.                 alert(`我是第${$target.index()+1}个LI`);
  58.             }
  59.         });
  61.         $createBtn.click(function () {
  62.             let str = ``;
  63.             for (let i = 0; i < 5; i++) {
  64.                 count++;
  65.                 str += `<li>我是第${count}个LI</li>`;
  66.             }
  67.             $newsList.append(str);
  68.         });
  69.     </script>
  72.     <script>
  73.         /* let $newsList = $('.newsList'),
  74.             $createBtn = $('.createBtn'),
  75.             $lis = null;
  77.         function handle() {
  78.             $lis = $newsList.children('li');
  79.             $lis.each(function (index, item) {
  80.                 $(item).click(function () {
  81.                     alert(`我是第${index+1}个LI`);
  82.                 });
  83.             });
  84.         }
  85.         handle();
  87.         let count = 5;
  88.         $createBtn.click(function () {
  89.             let str = ``;
  90.             for (let i = 0; i < 5; i++) {
  91.                 count++;
  92.                 str += `<li>我是第${count}个LI</li>`;
  93.             }
  94.             $newsList.append(str);
  95.             handle();
  96.         }); */
  97.     </script>
  98. </body>
  99. </html>

案例4

  1. // 点击页面中的每个 li，输出每个 li 里面的内容
  3. let lis = document.querySelectorAll('#list > li');
  5. // for 循环 给每个 li 绑定一个点击事件
  7. for (let i = 0; i < lis.length; i++) {
  8.   lis[i].onclick = function () {
  9.     console.log(this.innerText);
  10.   }
  11. }
  13. // 事件委托：当遇到对一个元素中的所有子元素绑定相同的事件，并且事件触发时做的事情一样；利用事件的冒泡机制，我们把事件绑定给父元素（一般绑定给父元素，也可以绑定给更高的元素），然后根据事件触发时 事件源 e.target 判断你点击的到底是哪个元素；
  14. let list = document.querySelector('#list');
  15. list.onclick = function (e) {
  16.   // ?? 怎么知道你点击的哪个li呢？
  17.   // e.target 是触发事件的目标元素；
  18.   console.log(e.target.innerText);
  19. };
  21. // 事件委托的性能比循环绑定性能好；