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属性更有用途~~~