js的事件委派

最新推荐文章于 2024-06-10 17:00:16 发布

2333!!!!!

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量115

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46564011/article/details/122530124

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*事件的委派说白了就是 减少多个事件的单独赋值 把时间的响应都通过冒泡交给父元素 进行节约
        * 并且使用event参数通过事件参数的target
        * 进行dom元素的锁定
        * 并通过dom元素上
        * 某些特定的id 或 classname 来进行多个相同标签的区分
        * */
        window.onload=function(){
            var as=document.getElementsByTagName("a");
         /*   for (let i=0;i<as.length;i++)
            {
                as[i].onclick=function(){
                    alert(i);
                }
            }*/
            var insert_li=document.getElementById("insert_li");
            var box_1_ul=document.getElementById("box_1_ul");
            insert_li.onclick=function(){
                var li=document.createElement("li");
                li.innerHTML="<li><a href=\"javascript:;\" class=\"link\">新增</a></li>";
                box_1_ul.appendChild(li);
            }
            //我们可以通过这种方法来再页面执行的时候添加一个li元素
            //但是我们不能给后加的li元素进行事件的赋值不能让他响应单击事件(其实也可以就是把事件赋值的for循环做成方法每次添加li后就调用一次)
            //我们可以通过冒泡进行事件的委派进行优化节约资源
            //我们把点击响应事件赋值给他们的父元素主要他们被点击父元素因为包含他们所以都会响应
            //再通过事件参数的target属性来锁定是谁触发了事件
            //我们先把上面的for循环添加单击事件注释掉
            //再为ul元素添加单击事件
            box_1_ul.onclick=function(event){
                event = event || window.event;
              //  alert(event.target);//但是这样 li也是ul的元素单击li的空白地方也会使ul响应
                //那么就是区分它们
                //event.target会返回事件触发的指定dom元素
                if (event.target.className == "link")//event.target.className idea不显示后面的.className
                {//显示类名是"link"的子元素的id
                    alert(event.target.id);
                }
                event.cancelBubble=true;//取消对body的冒泡
            }
        }
    </script>
</head>
<body>
<button id="insert_li">增加li</button>
<div id="box_1" style="width: 600px;background-color:grey; margin:0 auto;">
    <ul id="box_1_ul">
        <li><a id="sv" href="javascript:;" class="link">1</a></li>
        <li><a href="javascript:;" class="link">2</a></li>
        <li><a href="javascript:;" class="link">3</a></li>
        <li><a href="javascript:;" class="link">4</a></li>
    </ul>
</div>
</body>
</html>

2333!!!!!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的事件委派

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> /*事件的委派说白了就是减少多个事件的单独赋值把时间的响应都通过冒泡交给父元素进行节约 * 并且使用event参数通过事件参数的ta.
复制链接

扫一扫