事件流 - 事件委托

解决新增的标签元素没有老事件的问题。
思路 为子盒子的父元素绑定事件，通过 冒泡。触发子盒子就会冒泡到父盒子。（子盒子设有的绑定事件也会触发这个事件）

<button>生成新的 li 标签</button>
<ul>
<li>我是原生土著li1</li>
<li>我是原生土著li2</li>
<li>我是原生土著li3</li>
</ul>

 li {
    list-style: none;
    font: 22px/34px "simsun";
    background-color: skyblue;
    margin: 3px;
    cursor: pointer;
    }
  .new-li {
      background-color: lightgreen;
  }

let btn = document.getElementsByTagName('button')[0]

let liArr = document.getElementsByTagName('li')

let ul = document.getElementsByTagName('ul')[0]

// 为 li 标签绑定事件
Array.from(liArr).forEach(item => {
  item.onclick = function() {
    alert(item.innerHTML)
  }
});

// 点击 button 创建 li 标签，并追加到 ul
btn.onclick = () => {
  let newLi = document.createElement('li')
  newLi.innerHTML = "我是外来的 li"
  newLi.className = 'new-li'
  ul.appendChild(newLi)
}

上面代码测试，新增的 li 标签，是没有事件的。

那么如何通过事件冒泡来实现呢？

// 点击 button 创建 li 标签，并追加到 ul
btn.onclick = () => {
  let newLi = document.createElement('li')
  newLi.innerHTML = "我是外来的 li"
  newLi.className = 'new-li'
  ul.appendChild(newLi)
}

ul.onclick = (event) => {
  var event = event || window.event
  let ele = event.target ? event.target : event.srcElement // 兼容写法
  if (ele.tagName === 'LI') {
    console.log('我是 li 标签');
  }
}

event.target:  事件引发者 （不一定是事件源）；