事件委托

事件委托是将子元素事件委托给父元素，这样就可以减少侦听的数量。

适用场景分析: 如果想要点击多个元素，例如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.判断点击对象是否存在子元素和其他条件