DOM事件的委派

最新推荐文章于 2022-07-22 08:14:59 发布

Paranoid_truggle

最新推荐文章于 2022-07-22 08:14:59 发布

阅读量93

点赞数

文章标签： js dom

本文链接：https://blog.csdn.net/Paranoid_truggle/article/details/119251072

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    window.onload=function (){
    //    点击按钮以后添加超链接
        var btn01 = document.getElementById("btn01");
        var ul=document.getElementById("ul");
        btn01.onclick=function (){
        //    创建一个li
            var li = document.createElement("li");
            li.innerHTML="<a href='javascript:;' class='link'>aaa超链接一</a>";
            ul.appendChild(li)

        };


    //  为每一个超链接都绑定一个单机响应函数
    //    这个操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
    //   获取所有的a
      var allA = document.getElementsByTagName("a");
    //  遍历
    //   for(var i=0 ;i<allA.length;i++){
    //       allA[i].οnclick=function (){
    //             alert("我被响应了")
    //       };
    //   }

    //  我们希望只绑定一次事件，就应用到所有的元素上，即使元素是后添加的
    //    可以尝试将其绑定给元素的共同元素
    //
    //    事件的委派
    //          指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先函数
    //          从而通过祖先元素的响应事件来处理事件
    //          事件委派是利用冒泡，通过委派可以减少事件委派的次数

    //    为ul绑定一个单击响应函数
        ul.onclick= function (event){
            //target
            //    event中的target表示的是触发事件的对象
            //如果触发事件的对象是我们期望的元素，则执行否则不执行
            if(event.target.className==="link")
             alert("我被响应了")
        }
    }
  </script>
</head>
<body>
<button id="btn01">添加超链接</button>
<ul id="ul">
  <li><a href="javascript:;" class="link">超链接一</a></li>
  <li><a href="javascript:;" class="link">超链接二</a></li>
  <li><a href="javascript:;" class="link">超链接三</a></li>
</ul>
</body>
</html>

Paranoid_truggle

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload=function (){ // 点击按钮以后添加超链接 var btn01 = document.getElementById("btn01");
复制链接

扫一扫