DOM事件流与事件委托

事件流

<style>
  .big{
    width: 300px;
    height: 300px;
    background-color: red;
  }
  .center{
    width: 200px;
    height: 200px;
    background-color: yellow;
  }
  .small{
    width: 100px;
    height: 100px;
    background-color: blue;
  }
</style>

<div class="big">
    <div class="center">
        <div class="small"></div>
    </div>
</div>

  let big = document.querySelector(".big")
  let center = document.querySelector(".center")
  let small = document.querySelector(".small")
  big.onclick = function(){
    console.log("我是big")
  }
  center.onclick = function(){
    console.log("我是center")
  }
  small.onclick = function(){
    console.log("我是small")
  }

  // 顺序是 small-center-big
  // 从里到外是事件冒泡（默认事件在这个阶段触发）
  // 从外到里是事件捕获

例

<ul>
  <li>香蕉</li>
  <li>苹果</li>
  <li>鸭梨</li>
</ul>

// 利用事件委托来实现删除
  let ul = document.querySelector("ul")
  ul.onclick = function(e){
    ul.removeChild(e.target)
  }

将事件委托给父元素，利用事件冒泡，可以不用给每个子元素都绑定事件