JS中的事件委托，事件代理

JS中的事件委托，事件代理

事件委托的原理，以及使用详细可见这位大神写的点这里

寻找事件委托中的具体的子元素

方法一：通过设置ID 的方式

<div id="box">
        <input type="button" id="add" value="添加" />
        <input type="button" id="remove" value="删除" />
        <input type="button" id="move" value="移动" />
        <input type="button" id="select" value="选择" />
    </div>

window.onload = function(){
            var Add = document.getElementById("add");
            var Remove = document.getElementById("remove");
            var Move = document.getElementById("move");
            var Select = document.getElementById("select");

            Add.onclick = function(){
                alert('添加');
            };
            Remove.onclick = function(){
                alert('删除');
            };
            Move.onclick = function(){
                alert('移动');
            };
            Select.onclick = function(){
                alert('选择');
            }

        }

方法二按顺序找：

<ul id="ul">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");
   oUl.onclick = function(ev){ 
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
         if(target.nodeName.toLowerCase() == "li"){
             var index;
             for(var i=0;i<aLi.length;i++)
             {
             if(aLi[i]===target)
             index=i;
             }
             if(index>=0)alert('我的下标是第'+index+'个');
         }

   }

}

方法三：通过设置dataset来找指定的子元素

只有点击北京的LI才触发事件！

<ul id="ul">
    <li data-city="北京">111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");
   oUl.onclick = function(ev){ 
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
         if(target.nodeName.toLowerCase() == "li"){
               if(event.target.dataset.city=="北京")
                    //CODE

         }

   }

}

dataset有时比ID属性更有用途~~~