1. 程式人生 > 其它 >js事件委託

js事件委託

技術標籤:javascript高階程式設計第三版


<style>
        #ull {
            height: 200px;
            width: 200px;
            list-style: none;
        }
        .li {
            height: 50px;
            width: 100%;
        }
    </style>

<div>
        <ul id="ull">
            <li class="li">hehe1</li>
            <li class="li">hehe2</li>
            <li class="li">hehe3</li>
        </ul>
    </div>
    <script>
        // window.onload = function(){
        //     var oUl = document.getElementById("ull")
        //     var aLi = document.getElementsByTagName("li")
        //     oUl.onmouseover= function(ev){
        //         var event = ev || window.event
        //         var target = ev.target || ev.srcElement 
        //         if(target.nodeName.toLowerCase() == "li"){
        //             target.style.background="red"
        //         }   
        //     }
        // }
        window.onload = function(){
            var oUl = document.getElementById("ull")
            var aLi = document.getElementsByTagName("li")
            oUl.onclick= function(ev){
                var event = ev || window.event
                var target = ev.target || ev.srcElement 
                if(target.nodeName.toLowerCase() == "li"){
                    debugger
                   alert(target.outerText) 
                    // target.style.background="red"
                }   
            }
        }
    </script>

參考:https://www.cnblogs.com/moqing/p/5590433.html