Javascript事件总结(二)

2014-04-27 · 9 min read

前一篇文章,比较详细的讲了下 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)
}

事件委托#

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

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

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

<ul>
    <li><a id="a1" href="955.html">jQuery最佳实践<a></li>.html"
    <li><a id="a2" href="992.html">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 属性就可以开启控件,其原理也是事件委托。