顶层（document）
                         ||   捕获           ||
                         ||                     ||  冒泡 
                     事件触发源 = = =

<ul id='ul'>
    <li>111111</li>
    <li>222222</li>
    <li>333333</li>
</ul>
<button id='button'>添加元素</button>

window.onload = function(){
  let oUl = document.getElementById('ul');
  let aLi = oUl.getElementsByTagName('li');
  let but = document.getElementById('button');
  let now = 3;
  // 事件源：event对象，不管在哪个事件中，只要你操作的哪个元素就是事件源
  // ie：window.event.srcElement
  // 标准：event.target
  oUl.onmouseover = function(e){
      let ev = e || window.event;
      let target = ev.target || ev.srcElement;
      if(target.nodeName.toLowerCase() == 'li'){
          target.style.background = 'red';
      }
  }
  oUl.onmouseout = function(e){
      let ev = e || window.event;
      let target = ev.target || ev.srcElement;
      if(target.nodeName.toLowerCase() == 'li'){
          target.style.background = '';
      }
  }
  but.onclick = function(){
      now ++;
      let newLi = document.createElement('li');
          newLi.innerHTML = 111111 * now;
          oUl.appendChild(newLi);
  }
}