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是，就会触发点击事件。我们点击北京时，北京下的子元素就折叠起来，点击昌平时，昌平下的子元素会折叠

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