js—事件委托

事件委托也叫事件代理，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。
事件委托作用：
(1)支持为同一个DOM元素注册多个同类型事件
(2)可将事件分成事件捕获和事件冒泡机制

<div id="parent">
  父亲
  <div class="son" id="son1">儿子1</div>
  <div class="son" id="son2">儿子2</div>
</div>

JavaScript

var parent = document.querySelector('#parent');
var son1 = document.querySelector('#son1');
var son2 = document.querySelector('#son2');

操作父元素(—把老大，老二，老三要操作的事件，委托给父亲去操作)

JavaScript

parent.addEventListener('click', function () {
  var ev = window.event || e;
  // 捕获你当前操作的目标对象
  console.log(ev.target);
})

代码演示：

创建一个节点

JavaScript

var son3 = document.createElement('div');
// 向这个div中添加属性
son3.setAttribute('class', 'son');
son3.setAttribute('id', 'son3');
son3.style.backgroundColor = 'orange';
son3.style.margin = '0 auto';
// 向div里面放置内容son3
son3.innerHTML = '儿子3';
// 把创建的节点，添加到父容器中
parent.appendChild(son3);