当前位置：网站首页>JS 批量添加事件监听onclick this 事件委托 target currentTarget onmouseenter onmouseover

JS 批量添加事件监听onclick this 事件委托 target currentTarget onmouseenter onmouseover

2022-07-28 17:28:00 【HandsomeDanielWu】

this

<body>
    <button id="btn">按我添加新的li列表</button>
    <ul id="list">
        <li>默认标签</li>
        <li>默认标签</li>
        <li>默认标签</li>
    </ul>
    <script>
        var oBtn = document.getElementById('btn');
        var oList = document.getElementById('list');
        var lis = oList.getElementsByTagName('li');
        
        // 变红色
        var redFunc = function(){
            this.style.color = 'red';
        };
        
        //给默认的li添加点击事件
        for (var i = 0; i < lis.length; i++){
            lis[i].onclick = redFunc;
        };

        //添加新标签
        oBtn.onclick = function () {
            var oli = document.createElement('li');
            oli.innerHTML = '新添加选项';
            oList.appendChild(oli);
            //新添加的标签，必须手动添加监听事件
            oli.onclick = redFunc;
            
        };
        
    </script>
</body>