js事件委托详解

最新推荐文章于 2021-07-08 16:19:59 发布

小宝html5基础的感习

最新推荐文章于 2021-07-08 16:19:59 发布

阅读量152

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/qq_41936213/article/details/105334909

版权

事件原理

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

<style>
        div{
            position: relative;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .div0{
            position: absolute;
            width: 250px;
            height: 150px;
            background-color:steelblue;
        }
        .div1{
            position: absolute;
            width: 150px;
            height: 100px;
            background-color: wheat;
        }
        .div2{
            position: absolute;
            width:100px;
            height: 50px;
            background-color: blue;
        }
    </style>

 <div  class="div0">
        <div class="div1">
            <div class="div2"></div>
        </div>

 <script>
        var div0=document.querySelector(".div0");
        var div1=document.querySelector(".div1");
        var div2=document.querySelector(".div2");

        div0.addEventListener("click",clickHandler0,true);
        div1.addEventListener("click",clickHandler1,true);
        div2.addEventListener("click",clickHandler2,true);

        function clickHandler0(e){
            console.log("点击div0");
           // e.stopPropagation();
            
        }
        function clickHandler1(e){
            console.log("点击div1");
            //e.stopPropagation();
        }
        function clickHandler2(e){
            console.log("点击div2");
            //e.stopPropagation();
        }

    </script>

效果图：
在这里插入图片描述
当我们点击div2时就会打印出div0、div1、div2,如我们只想打印div0，在其他的两个子元素中添加stoppropagetion().

事件委托：

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

事件触发

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

<body>
    <ul>
        <li>北京</li>
        <li>天津</li>
        <li>河南</li>
        <li>河北</li>
        <li>陕西</li>
    </ul>
    <script>
        var ul=document.querySelector("ul");
        ul.addEventListener("click",clickHandler);
        function  clickHandler(e){
            console.log("我是ul的点击事件,我被触发了");
        }
    </script>
</body>

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

<body>
    <ul>
        <li>北京</li>
        <li>天津</li>
        <li>河南</li>
        <li>河北</li>
        <li>陕西</li>
    </ul>
<script>
    var ul=document.querySelector("ul");
    ul.addEventListener("click",clickHandler);
    function  clickHandler(e){
      e=e||window.event;
      var target=e;
      console.log(target);
    }
</script>

委托：概念上是我们要做的事情委托给被人来做，这样不仅可以减少内存，还可以将大大减少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;//获取所想要的效果
            }
        }  
    </script>
</body>

如上述的ul中有多个li,我们只要通过一个ul来触发点击事件，但我们点击Li是，就会触发点击事件。

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

小宝html5基础的感习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js事件委托详解

事件原理通过div0.addElementListener来调用：用法：div0.addElementListener(事件类型，事件回调函数，是否捕获时执行){}。1、事件类型(type)：必须是字符串，可以设置为任意字符串，但是部分字符串系统事件类型2、事件回调函数(onclick) :指向一个函数，当收到事件时执行该函数，如果没有收到不执行函数，写侦听事件时不执行函数3、是捕获时执...
复制链接

扫一扫