事件代理

时间 2019-11-09

标签事件代理繁體版

原文原文链接

在原生JavaScript中，咱们要实现事件绑定，一般用addEventListener来实现。javascript

好比：html

 <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；如：java

 <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绑定点击事件，如：node

 // 获取父节点，并为它添加一个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

若是在jquery中，咱们能够这样绑定;this

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

　　固然，在特定环境下，咱们还须要阻止事件冒泡；代理

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

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