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

题目：点击li标签，在控制台输出对应的内容

DOM结构

<ul id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

 

方法一：批量绑定点击事件

?

1 2 3 4 5 6 7 8 9 10

//获取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);         }     }

　　

方法二：事件代理

?

1 2 3 4 5 6 7 8

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操作少，性能更好；

搜索

复制