事件代理

在原生JavaScript中，我们要实现事件绑定，通常用addEventListener来实现。

比如：

 <ul id="parent-list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

　　要给ul中每个li添加一个点击事件，我们可以给每个li添加一个onclick；如：

 <ul id="parent-list">
    <li onclick="hasClick(this)">1</li>
    <li onclick="hasClick(this)">2</li>
    <li onclick="hasClick(this)">3</li>
    <li onclick="hasClick(this)">4</li>
    <li onclick="hasClick(this)">5</li>
    <li onclick="hasClick(this)">6</li>
  </ul>

　　但是，如果li有很多条，这样添加会很痛苦。所以我们需要在js中给li绑定点击事件，如：

 // 获取父节点，并为它添加一个click事件
  document.getElementById("parent-list").addEventListener("click",function(e) {
    // 检查事件源e.targe是否为Li
    if(e.target && e.target.nodeName == "LI") {
      // 真正的处理过程在这里
      console.log(e.target.innerHTML," was clicked!");
    }
  });

　　这样，就成功给每个li绑定了对应的点击事件。

如果在jquery中，我们可以这样绑定;

$('#parent-list').delegate('li', 'click', function() { alert("click!") });

　　当然，在特定环境下，我们还需要阻止事件冒泡；

$('xxxx').bind('click', function(e) {    
    e.preventDefault();    
    // 或者    
    e.stopPropagation();    
});    

　　这些为我理解中的事件代理。