一、概念理解：
1、事件：HTML DOM 使 JavaScript 有能力對 HTML 事件做出反應。比如點選事件、滑鼠移入/移出事件等。事件通常與函式配合使用，這樣就可以通過發生的事件來驅動函式執行。
2、DOM 事件流：冒泡事件流、捕獲事件流。
3、DOM 事件模型：捕獲、目標、冒泡。

那什麼是事件委託呢？

事件委託：即是，一個事件本來是要繫結到某個元素上，然而卻繫結到了該元素的父（或祖先）元素上，利用事件冒泡原理，觸發執行效果。

二、事件委託的優點：

那為什麼要使用事件委託？事件委託有什麼好處，以及使用時要注意什麼？

事件委託大概有兩個優點：
1、提高網頁效能。
2、通過事件委託新增的事件，對後期生成的元素依然有效。

上面提到的第二點如何理解呢？

舉個例子：現在頁面上有個 ul，ul 裡有三個 li，通過迴圈給每個 li 新增點選事件，發現三個 li 到可以正常觸發點選事件了，然後通過 js 程式碼在 ul 裡插入（append）兩個 li，
再試著點選所有 li，發現前面三個 li 正常觸發點選事件，後面新新增的兩個 li 無法正常觸發點選事件。

三、事件委託的使用方法：

使用上面 ul 的例子進行事件委託給每個 li 繫結事件，示例程式碼：

<ul @click="fun($event)" id="list">
      <li>1</li>
      <li
 
>2</li>
      <li>2</li>
    </ul>

<script src="./vue.min.js"></script>
    <script>
        new Vue({
          el: '#list',
          data: {},
          methods : {
            fun : function(e){
              var e = e || window.event;
              var target = e.target || e.srcElement;
              if
 
(target.nodeName.toLowerCase() === 'li'){
                alert('li' + target.nodeName.toLowerCase());
              }
            }
          }
        })
    </script>

四、事件委託怎麼獲取元素下標（索引值）
示例 demo:

<ul @click="fun(this)" id="list">
      <li v-for = "(value,key) in arr">
        {{key}}:{{value}}
      </li>
    </ul>

    <style>
      body{
        margin: 0;
      }

      ul{
        list-style: none;
        margin:0 0 0 10px;
        padding: 0;
      }

      ul li{
        width: 50px;
        height: 50px;
        margin-top: 10px;
        background-color: red;
        cursor: pointer;
      }
    </style>


    <script src="./vue.min.js"></script>
    <script>
        new Vue({
          el: '#list',
          data: {
            arr:[0,1,2]
          },
          methods : {
            fun : function(ele){
              var e = e || window.event;
              var target = e.target || e.srcElement;
              var li = document.querySelectorAll('li');
              for(var i in li){
                if(target === li[i]){
                  var value = parseInt(i);
                  alert('所點選的li的下標是：' + value);
                }
              }
            }
          }
        })
    </script>

最後說下事件繫結可能帶來的隱患，當頁面非常複雜的情況下，非常容易引起混亂，特別是當多種（個）事件通過事件委託繫結到同一個元素上時。