lovecoding
/
web0715


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <button id="add-btn">add</button>
    <script>
        // var aLi = document.getElementsByTagName("li");
        // for(var i=0;i<aLi.length;i++){
        //     aLi[i].onclick = function(){
        //         console.log(this.innerText);
        //     }
        // }

        // 事件委托 事件委托是基于冒泡机制实现
        // 相当于把内部多个元素的事件委托给他们共同的父级去处理
        var oUl = document.getElementsByTagName("ul");
        var addBtn = document.getElementById("add-btn");
        oUl[0].onclick = function(e){
            // console.log(e);
            // console.log(e.target.innerText);
            if(e.target.tagName == "LI"){
                console.log(e.target.innerText)
            }else{
                console.log("点错了");
            }
        }
        var i = 4;
        addBtn.onclick = function(){
            var oLi = document.createElement("li");
            oLi.innerText = i++;
            oUl[0].append(oLi);
        }


        // /**
        //  * 事件委托可以避免循环给内部元素绑定事件
        //  * 他还可以获取到新增元素
        //  * 
        //  * /
    </script>
</body>
</html>