性能优化——事件代理

了解过JS的事件机制应该知道JS的事件触发后会有一个冒泡阶段。
事件代理就是利用了这个机制。

我们考虑这样一个情况

var ulNode = document.getElementById("ulNode");
var fragment = document.createDocumentFragment();

for (let i = 0;i < 10;i++){
  var liNode = document.createElement("li");
  liNode.innerText = "node" + i;
  liNode.addEventLinstener("click",function(event){
    console.log("you click" + event.target.innerText);
  });
  fragment.appendChild(liNode);
}

ulNode.appendChild(fragment);

在这里我们为每一个li节点都绑定了一个点击事件，这无疑是不效率的做法。而利用冒泡机制我们可以讲事件委托给父节点ul，这样就只需要绑定一个事件。

var ulNode = document.getElementById("ulNode");
var fragment = document.createDocumentFragment();

for (let i = 0;i < 10;i++){
  var liNode = document.createElement("li");
  liNode.innerText = "node" + i;
  fragment.appendChild(liNode);
}

ulNode.addEventLinstener("click",function(event){
  if(event.target.tagName.toLowerCase() === 'li'){
    console.log("you click"+event.target.innerText);
  }
}
ulNode.appendChild(fragment);

参考：https://segmentfault.com/a/1190000000490322