JS篇(007)-事件委托是什么

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>凤梨</li>
</ul>
// good
document.querySelector('ul').onclick = (event) => {
  let target = event.target
  if (target.nodeName === 'LI') {
    console.log(target.innerHTML)
  }
}
// bad
document.querySelectorAll('li').forEach((e) => {
  e.onclick = function() {
    console.log(this.innerHTML)
  }
})

    <ul id="ul">
        <li>aaaaaaaa</li>
        <li>事件委托了 点击当前，如何获取 这个点击的下标</li>
        <li>cccccccc</li>
    </ul>
    <script>
        window.onload = function () {
            var oUl = document.getElementById("ul");
            var aLi = oUl.getElementsByTagName("li");
            oUl.onclick = function (ev) {
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if (target.nodeName.toLowerCase() == "li") {
                    var that = target;
                    var index;
                    for (var i = 0; i < aLi.length; i++)
                        if (aLi[i] === target) index = i;
                    if (index >= 0) alert('我的下标是第' + index + '个');
                    target.style.background = "red";
                }
            }
        }
    </script>