Javascript 事件总结（二）

前一篇文章，比较详细的讲了下 javascript 的事件流和事件处理程序，下面接着讨论 javascript 的事件对象和事件委托。

事件对象#

在触发 DOM 上的事件时，会产生一个事件对象 event。这个对象包含了所有和事件有关的信息（例如导致事件的元素，事件的类型等）。具体内容可以看W3School，下面讲一下兼容各种浏览器的事件对象：

1、获取 event 对象

function getEvent(event) {
  return event ? event : window.event
}

2、获取事件目标

function getTarget(event) {
  return event.target || event.srcElement
}

3、取消事件的默认行为

function preventDefault(event) {
  if (event.preventDefault) {
    event.preventDefault()
  } else {
    event.returnValue = false
  }
}

4、阻止事件冒泡

function stopPropagation(event) {
  if (event.stopPropagation) {
    event.stopPropagation()
  } else {
    event.cancelBubble = true
  }
}

使用方法举例：

var link = document.getElementById('link')
link.onclick = function (event) {
  alert('link')
  preventDefault(event)
}

事件委托#

事件处理程序过多的时候，会有几个问题：

每个事件处理函数都是对象，都会占内存，所以事件处理程序越多，性能越差。
必须事先指定所有的事件处理程序，事件处理程序越多，访问 DOM 的次数就越多，会延迟整个页面交互就绪的时间。

所以，建议使用事件委托来解决这些问题。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理一类的事件。例如：

<ul>
    <li><a id="a1" href="955">jQuery最佳实践<a></li>
    <li><a id="a2" href="992">Handlebars.js 中文文档</a></li>
</ul>

我们想给上面的两个链接添加 click 事件，我们可以这么做：

document.onclick = function (e) {
  e = e || window.event
  var target = e.srcElement ? e.srcElement : e.target

  switch (target.id) {
    case 'a1':
      //点击了a1
      break
    case 'a2':
      //点击了a2
      break
  }
}

关于事件委托还有更“高端”应用，例如 bootstrap 等类库，直接在标签上加data-toggle 属性就可以开启控件，其原理也是事件委托。