event之target与currentTarget

TIP

target指的是触发事件的元素，click直接点击的那个元素

currentTarget指的是事件绑定的那个元素

举个栗子：

html

  <div id="div1">
    div1
    <div id="div2">div2</div>
  </div>

  var div1 = document.querySelector('#div1");
  div1.addEventListener('click',function(e){
    console.log(e.target);
    console.log(e.currentTarget);
  })

  // 点击div1 输出
  // <div id="div1">...</div>
  // <div id="div1">...</div>
  // 点击div2 输出
  // <div id="div2">div2</div>
  // <div id="div1">...</div>

  // 如果直接console.log(e)，展开会发现e.currentTarget属性值为null,说明事件函数执行完后对它进行了重新赋值, 只存在于当前执行生命周期