<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
如果给每个li添加点击事件：
var li=document.getElementsByTagName('li')
for(var i=0i<li.lengthi++)
alert(li[i].innerHTML)
要是用事件委托
var ul=document,getElementById('ul1')
var target = ul.target || ul.srcElement //兼容处理
alert(target,innerHTML)
这样做的好处就是不在进行查询，减少了DOM操作，极大地改善了代码性能。
1、(缺点 1 for循环影响性能,2每次循环都会在内部创建一个事件,3 如果 li 是动态追加的会导致事件失效。)
var btns=document.getElementsByClassName("btn")//扩展 可以有多种获取DOM方法
for(var i=0i<btns.lengthi++){
btns[i].onclick=function(){
var id=this.getAttribute("data-id")
if(id!="null"){
console.log(id)
}
}
}
2、
(解决了方案一种的2,3缺点,但是还有for循环!IOS下事件委托失效解决方案)
var btns=document.getElementsByClassName("btn")
function handleClick(){
var id=this.getAttribute("data-id")
if(id!="null"){
console.log(id)
}
}
for(var i=0i<btns.lengthi++){
btns[i].addEventListener("click",handleClick,false)
}
3、
(完美解决方案1种的所有缺点)
涉及知识点:addEventListener,event
var parent=document.getElementById("parent")
function handleClick(){
var e=window.event||arguments[0]
var target=e.srcElement||e.target
if(target.nodeName.toLowerCase() == 'li'){
var id=target.getAttribute("data-id")
if(id!="null"){
console.log(id)
}
}
}
parent.addEventListener("click",handleClick,false)
