e.target ||e.srcElement //e.srcElement用于老版本IE浏览器
通过菜单栏案例来演示事件委托效果
- 事件委托原理形象化理解:子元素li将事件委托给父元素ul
- 操作:给父元素ul绑定点击事件,当我们点击每个li时,能够得出对应li里面的内容
代码如下:
<h1>动画片</h1>
<ul>
<li>火影忍者</li>
<li>喜羊羊</li>
<li>美羊羊</li>
<li>懒洋洋</li>
<li>沸羊羊</li>
</ul>
<button>添加</button>
<script>
var ul=document.querySelector("ul")
var btn=document.querySelector("button")
//给ul对象绑定点击事件,把li中的点击效果委托给ul去完成
ul.onclick=function(e){
console.log(e)
var e = e || window.event
var tar=e.target ||e.srcElement
//判断当前点击的对象是否为li
if(tar.nodeName=="LI"){
console.log(tar.innerHTML)
}
}
btn.onclick=function(){
//创建新的li对象
var newLi=document.createElement('li')
//添加文本
newLi.innerHTML="海贼王"
//把新节点追加到ul中
ul.appendChild(newLi)
}
/*
事件委托注意事项:
1、只能把子元素委托给结构父级
2、只能委托相同类型的事件
*/
</script>