事件代理

在原生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();    
});    

　　這些爲我理解中的事件代理。