js世家委托详解

事件原理

通过div0.addElementListener来调用：
用法：div0.addElementListener(事件类型，事件回调函数，是否捕获时执行){}。
1、事件类型(type)：必须是字符串，可以设置为任意字符串，但是部分字符串系统事件类型
2、事件回调函数(onclick) :指向一个函数，当收到事件时执行该函数，如果没有收到不执行函数，写侦听事件时不执行函数
3、是捕获时执行(e):默认值是false，在冒泡时执行，捕获时不执行，如果设置为true，在捕获时执行
4、注意：stopPProgetion():是停止冒泡， IE8以下是不支持的
cancelBubble(): 停止冒泡 IE8以下是支持的

例子：

效果图

当我们点击div2时就会打印出div0、div1、div2,如我们只想打印div0，在其他的两个子元素中添加stoppropagetion().

事件委托：

是将元素的侦听事件全部委托给最外层的元素,也就是我们把子元素要做的事件全部委托给父元素来做。

事件触发：

就是当我们点击元素时，不管我们的子元素有没有点击事件，只要父元素有点击事件，就可以触发子元素的点击事件。

例子:

效果图：

触发条件：target:被点击的目标元素。和this一样，当我们添加一个触发点击元素时，点击那个元素，target就是这个元素。

委托：概念上是我们要做的事情委托给被人来做，这样不仅可以减少内存，还可以将大大减少dom的操作。

<style>
        ul{
            transition: all 0.5s;
        }
    </style>
 
<body>
    <ul  class="menu">
        <li>北京
            <ul>
                <li>海淀</li>
                <li>昌平
                    <ul>
                        <li>沙河</li>
                        <li>回龙观</li>
                        <li>龙泽</li>
                        <li>天庭</li>
                        <li>傻喵</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>河北</li>
        <li>陕西</li>
        <li>>河南</li>
        <li>北京</li>
    </ul>
 
    <script>
 
        /*
           1、先设置ul的样式
           2、获取ul的列表
           3、给每个列表添加点击事件
           4、给要显示的单独列表设置样式，显示或掩藏
 
         */
 
        var list;//设置列表变量
 
       init();//设置初始化函数
        function init(){//执行初始化函数
            var menu=document.querySelector(".menu");//获取文档中.menu并赋值给menu;
            menu.addEventListener("click",clickHandler)//给menn添加点击事件，并执行clickHandler函数
 
        }
 
        function clickHandler(e){//执行clickHandler函数
            e.stopPropagation();//到达什么样的条件是停止显示
            if(e.target.nodeName!=="LI") return;//如e.target等于所有的列表时执行下一语句；
 
            ////如上述条件成立，执行下一个子元素
            if(e.target.firstElementChild){
                if(!e.target.bool){//如为真时，则隐藏，否显示
                    e.target.firstElementChild.style.display="none";
                }else{
                    e.target.firstElementChild.style.display="block";
                }
                e.target.bool=!e.target.bool;//获取所想要的效果
            }
 
        }  
 
        /* var list;
        init();
        function init(){
            var menu=document.querySelector(".menu");
            menu.addEventListener("click",clickHandler)
        }
 
        function clickHandler(e){
            // console.log(this,e.target);//this在事件函数中是被点击的对象(暂时),
            // 实际上this是侦听事件的对象,也就是外面执行addEventListener方法的对象menu
            // e.target 事件的目标 真实点击到最终得目标对象
            // e.currentTarget  和this相同,都是事件侦听的对象
            e.stopPropagation();
            // this 是被点击的元素
            if(e.target.nodeName!=="LI") return;
            if(e.target.firstElementChild){
                if(!e.target.bool){
                    e.target.firstElementChild.style.display="none";
                }else{
                    e.target.firstElementChild.style.display="block";
                }
                e.target.bool=!e.target.bool;
            }
        } */
 
    </script>
</body>

效果图：

如上述的ul中有多个li,我们只要通过一个ul来触发点击事件，但我们点击Li是，就会触发点击事件。我们点击北京时，北京下的子元素就折叠起来，点击昌平时，昌平下的子元素会折叠

以上仅为日常的分享，如有更好的建议，多多发表喔！！！！！