事件委託是將子元素事件委託給父元素，這樣就可以減少偵聽的數量。

適用場景分析: 如果想要點選多個元素，例如li，但是現在li有很多個，則必須遍歷每個li，新增事件偵聽，

使用事件委託機制，只需要給父元素ul設定一個偵聽就可以。

事件委託的經典例子，就是級聯選單。
js程式碼

        init();
        function init(){
            var ul=document.querySelector("#menu");
            ul.addEventListener("click",clickHandler);
        }

        function clickHandler(e){
            // if(e.target.nodeName!=="LI")return;    //判斷點選的時候是li標籤，不是則返回
            if(e.target.constructor!==HTMLLIElement)return;   //和上面判斷一樣
            e.target.bool=!e.target.bool;
            if(!e.target.firstElementChild)return;//判斷點選的標籤是否存在子元素，不存在返回
            if(e.target.bool)e.target.firstElementChild.style.display="none";
            else e.target.firstElementChild.style.display="block";
        }
 

html標籤

<ul id="menu">
        <li>北京
            <ul>
                <li>昌平
                    <ul>
                        <li>回龍觀</li>
                        <li>天通苑</li>
                        <li>沙河</li>
                        <li>霍營</li>
                        <li>老牛灣</li>
                    </ul>
                </li>
                <li>海淀</li>
                <li>朝陽</li>
                <li>東城</li>
            </ul>
        </li>
        <li>山西</li>
        <li>陝西
            <ul>
                <li>西安</li>
                <li>咸陽
                    <ul>
                        <li>三原</li>
                        <li>禮泉</li>
                        <li>乾縣</li>
                        <li>淳華</li>
                        <li>旬邑</li>
                    </ul>
                </li>
                <li>寶雞</li>
                <li>安康</li>
                <li>延安</li>
            </ul>
        </li>
        <li>河北</li>
        <li>河南</li>
    </ul>
 

事件委託要注意的地方:

1.判斷點選的物件 2.判斷點選物件是否存在子元素和其他條件