题目：点击li标签，在控制台输出对应的内容
DOM结构
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
方法一：批量绑定点击事件
//获取dom
var list = document.getElementById('ul');
var li = list.getElementsByTagName('li');
//遍历li标签
for(let i = 0; i < li.length; i++){
//批量添加点击事件
li[i].onclick = function () {
console.log(i+1);
}
}
方法二：事件代理
var myul = document.getElementById('ul');
//给父元素添加点击事件
myul.onclick = function(e){
//e.target表示触发的事件源，有就是点击的li标签
if( e.target.nodeName.toLowerCase() == 'li' ){
console.log(e.target.innerHTML);
}
}
- 方法一：批量添加点击事件，用到了大量dom操作，性能开销大；
- 方法二：使用事件代理，通过给父元素绑定点击事件，点击子元素，冒泡给父元素，父元素通过e.target感知事件源进行操作，dom操作少，性能更好；
