事件对象、事件委托

事件对象

当对某个元素进行某个事件的触发，浏览器会把该事件触发后的详情信息包装成对象传到函数中。

var oDiv = document.getElementsByClassName("wrapper")[0];
oDiv.onclick = function (event) {
  var event = event || window.event;
  console.log(event);
};

event对象中有个属性可以获取到事件触发的源对象。

var oDiv = document.getElementsByClassName("wrapper")[0];
oDiv.onclick = function (event) {
  var event = event || window.event;
  // srcElement、target 就是事件源对象
  // 火狐只有 target ，IE只有 srcElement
  var target = event.target || target.srcElement;
  console.log(target); // <div></div>
};

事件委托

什么是事件委托呢？
事件委托就是事件交给其他元素去触发。
在以往的li列表点击事件的时候，我们需要给li的每一个元素都去绑定事件，这样极大的消耗性能。

var oUl = document.getElementsByTagName("ul")[0],
    oLi = document.getElementsByTagName("li"),
    length = oLi.length,
    item;
for (var i = 0; i < length; i++) {
  item = oLi[i];
  item.onclick = function () {
    console.log(this.innerText);
  };
}

而事件委托就可以利用「事件冒泡」的原理去让ul绑定点击事件。

var oUl = document.getElementsByTagName("ul")[0],
    oLi = document.getElementsByTagName("li"),
    length = oLi.length,
    item;
oUl.addEventListener("click", function (event) {
  var event = event || window.event;
  // 真正的事件源是 li
  if (event.target.nodeName === "LI") {
    console.log(event.target.innerText);
    // 类数组不能使用数组的方法，可以继承 Array.prototype.index 后就可以查找 li 的下标
    console.log(Array.prototype.indexOf.call(oLi, event.target));
  }
}, false);