javascript之事件委托

事件处理程序太多的话，一般做法是使用事件委托，这有利于减少内存开销。

原理是利用了事件冒泡。

Javascript 的事件沿着DOM树从监听节点下滑到触发节点，然后再上爬回监听节点。也就是说，如果你监听了一个DOM节点，那也就等于你监听了其所有的后代节点，可以利用target.tagName target.id target.className判断是否是该元素，然后执行事件即可。

<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>

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'; 
}
}

参考：javascript 有没有更高效的事件绑定写法