事件委托
事件委托就是利用冒泡的原理,把事件加到父元素或者祖先元素上,触发执行效果。
html代码:
<ul id="list">
<li id="item1">1</li>
<li id="item2">2</li>
<li id="item3">3</li>
</ul>
js代码:
<script type="text/javascript">
var list = document.getElementById("list");
var oLi = document.getElementsByTagName("li");
//传统方法:给每一项绑定事件
for( var i=0; i<oLi.length; i++){
oLi[i].index = i;
oLi[i].onclick = function(){
var i = this.index;
console.log(i);
}
}
var li4 = document.createElement("li");
li4.innerHTML = 4;
list.appendChild(li4);
</script>
看一下上例代码会不会出现什么问题?why
我们会发现,新增的第四个li,点击之后没有什么效果, 说明了什么问题?
说明了普通时间添加在新增的元素上是无效的,我们该如何解决?
这时主角–事件委托就应该出现了。
<script type="text/javascript">
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");
document.addEventListener("click",function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
//console.log(target);
if( target == item1 ){
console.log(item1.innerHTML);
}else if( target == item2 ){
console.log( item2.innerHTML);
}else if( target == item3 ){
console.log( item3.innerHTML );
}else{
console.log( item4.innerHTML );
}
})
var li4 = document.createElement("li");
li4.setAttribute("id","item4");
li4.innerHTML = 4;
list.appendChild(li4);
</script>
代码简洁一下:
document.addEventListener("click",function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
console.log(target);
if( target.nodeName == "LI"){
console.log(target.innerHTML);
}
})
var li4 = document.createElement("li");
li4.setAttribute("id","item4");
li4.innerHTML = 4;
list.appendChild(li4);
其余的代码都不变