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