学习笔记——事件委托

HTML中新增子元素，动态添加新增子元素的点击事件。

1.示例

<button id="add">新增</button>
<ul id="ul">
  <li>11</li>
  <li>22</li>
  <li>33</li>
  <li>44</li>
  <li>55</li>
</ul>

var $UL =  document.getElementById('ul');
var $Add = document.getElementById('add');
$UL.onclick = function(ev) {
  var e = ev || window.event;
  var target = e.target || window.event.srcElement;
  target.classList.add('active');
  console.log(target);
}
$Add.onclick = function() {
  var newNode = document.createElement('li');
  newNode.innerHTML = ($UL.children.length + 1) * 11;
  $UL.appendChild(newNode);
}

2.原因

1.每个子节点都需要绑定重复的点击事件
2.新增加的节点没有绑定点击事件

3.步骤

1.找到当前节点的父亲节点或祖先节点
2.将事件添加到你找到的这个父节点或者祖先节点上
3.找到触发对象，判断触发对象是否是想要的触发对象，进行后续操作