当前位置：网站首页>JS batch add event listening onclick this event delegate target currenttarget onmouseenter OnMouseOver

JS batch add event listening onclick this event delegate target currenttarget onmouseenter OnMouseOver

2022-07-28 19:54:00 【HandsomeDanielWu】

this

<body>
    <button id="btn"> Press me to add a new li list </button>
    <ul id="list">
        <li> Default label </li>
        <li> Default label </li>
        <li> Default label </li>
    </ul>
    <script>
        var oBtn = document.getElementById('btn');
        var oList = document.getElementById('list');
        var lis = oList.getElementsByTagName('li');
        
        //  Turn red 
        var redFunc = function(){
            this.style.color = 'red';
        };
        
        // Give default li Add click event 
        for (var i = 0; i < lis.length; i++){
            lis[i].onclick = redFunc;
        };

        // Add a new label 
        oBtn.onclick = function () {
            var oli = document.createElement('li');
            oli.innerHTML = ' Add new options ';
            oList.appendChild(oli);
            // New tags , You must add listening events manually 
            oli.onclick = redFunc;
            
        };
        
    </script>
</body>