事件代理实现点击li弹出对应的内容

常规的思路是循环遍历，一个个绑定事件，缺点是dom操作次数过多。

    //获取dom
        var list = document.getElementById('test');
        var li = list.getElementsByTagName('li');
        //遍历li标签
        for(let i = 0; i < li.length; i++){
            //批量添加点击事件
            li[i].onclick = function () {
                alert(this.innerHTML); 
            }
        }

 

使用事件代理则可以有效减少dom操作次数，写法如下：

  var ul=document.getElementById("test");
    ul.onclick=function clickHandler(e){
        if(e.target.nodeName.toLowerCase()=="li") { //感知到事件源为li上 需要注意，使用target获取到的节点名称全部为大写
            alert(e.target.innerHTML)
        }   
    }

其主要就是利用了事件冒泡的特性，点击子元素，冒泡给父元素，父元素通过e.target感知事件源进行操作。