DOM事件代理

课程目标

  • 掌握事件代理的原理和使用方式

课程内容

事件代理

当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。

<div id="wrap">
  <div class="d">Item 1</div>
  <div class="d">Item 2</div>
  <div class="d">Item 3</div>
  <a id="link" href="#">链接</a>
</div>
<button id="btn">添加</button>

当li被点击的时候需要触发相应的处理事件,一种方法是为每个Li都添加onClick的事件监听。

  var wrap = document.getElementById("wrap"),
      ds = wrap.getElementsByClassName("d"),
      link = wrap.getElementById("link")
  for(var i=0, i < ds.length; i++){
      ds[i].onclick = function(){
        console.log(this.innerHTML);
      }
  }
  link.onclick=function(){
    alert(1);
  }

另外,如果想插入新节点,插入的节点必须也要绑定事件才能生效

  btn.onclick = function(){
      var node = document.createElement("div");
      node.setAttribute("class", "d");
      node.innerHTML = "hello" ;
      node.onclick = function(){
          console.log(this.innerHTML);
      }
      wrap.appendChild(node);
  }

事件太多,太傻~

我们可以利用事件冒泡来优化,这就是事件代理

当事件到达父节点的时候,通过检查事件的target来判断并获取事件源

wrap.onclick = function(e){
   if(e.target.id === "link"){
    alert(1);
   }
   if(e.target.class === "d"){
    console.log(e.target.innerHTML);
   }
}

而且新添元素也不需要再进行事件绑定

  btn.onclick = function(){
      var node = document.createElement("div");
      node.class="d";
      node.innerHTML = "hello" ;
      //node.onclick = function(){
      //    console.log(this.innerHTML);
      //}
      wrap.appendChild(node);
  }