点击li标签弹出对应的内容

题目：点击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操作少，性能更好；

搜索

复制