事件代理【转】

用事件对象的 target 属性，你可以得到触发事件的元素。

事件被激活后，会像猴子一样沿着DOM树从监听节点下滑到触发节点，然后再上爬回监听节点。也就是说，如果你监听了一个DOM节点，那也就等于你监听了其所有的后代节点。代理的意思就是只监听父节点的事件触发，以来代理对其后代节点的监听，而你需要做的只是通过 target 属性得到触发元素并作出回应。来看我下面的例子：

<ul id="resources">
  <li><a href="http://developer.mozilla.org">MDN</a></li>
  <li><a href="http://html5doctor.com">HTML5 Doctor</a></li>
  <li><a href="http://html5rocks.com">HTML5 Rocks</a></li>
  <li><a href="http://beta.theexpressiveweb.com/">Expressive Web</a></li>
  <li><a href="http://creativeJS.com/">CreativeJS</a></li>
</ul>

这个例子中的HTML结构是个无序列表，当鼠标悬停会显示相应的标签信息。下面是它JS代码，你将看到它只用到了一个事件监听，然后在处理函数中得到target，以它的 tagName 来进行区分。

var resources = document.querySelector('#resources'),
    log = document.querySelector('#log');

resources.addEventListener('mouseover', showtarget, false);

function showtarget(ev) {
  var target = ev.target;
  if (target.tagName === 'A') {
    log.innerHTML = 'A link, with the href:' + target.href;
  }
  if (target.tagName === 'LI') {
    log.innerHTML = 'A list item';
  }
  if (target.tagName === 'UL') {
    log.innerHTML = 'The list itself';
  }
}

我费事吧啦解释了半天，乃们懂得这么做意味着什么么？这意味着你可以节省大量重复的事件监听，以减少浏览器资源消耗。大多数人可能会用jQuery的$('a').click(...) 啥啥啥的（虽然 jQuery的 on 方法优化的还OK啦不过偶还是蛮鄙视他的），这么做看似一句话蛮带感的，可其实它是把获取到的所有A元素一个一个的注册监听！然后在某个时刻，充斥着无数事件监听的页面终于觉累不爱，自爆以鸣冤屈。

她还有一个好处就是让HTML独立起来，比如之后还有要加子元素的需求，也不需要再为其单独加事件监听了。