动态添加事件的实现以及自己是实现阻止事件冒泡

最新推荐文章于 2022-09-21 17:30:05 发布

原创最新推荐文章于 2022-09-21 17:30:05 发布 · 687 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#事件的动态添加 #阻止事件冒泡 #e事件 #事件委托

本文介绍了一种在网页中动态创建元素并为其绑定点击事件的方法。通过JavaScript动态生成的元素可以实现与页面初始加载时存在的元素相同的功能。文章展示了如何为已存在的元素绑定事件监听器，并解释了为何直接为父元素添加事件监听器可能无法捕捉到动态添加的子元素的事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="d" style='width:100px;height:100px;background-color: red '>

       <span>这是页面中存在的span</span>

    </div>
    <input type="button" name="" value="按钮" id="btn">
   <script>

   // ★★★★★不支持动态添加事件,即你创建出来的span是没有click事件的
      var d=document.getElementById('d');
        d.onclick=function(e){
             var tar=e.target;
             if(tar.nodeName!=='SPAN'){
               return;
            }
         alert(123);

        };
       var spans=d.getElementsByTagName('span');

            for(var i=0;i<spans.length;i++){
                spans[i].onclick=function(){
                    alert(this.innerHTML)
                }
            }

              var btn = document.getElementById('btn')
   btn.onclick = function() {
          // 动态创建div元素
          var span = document.createElement("span");
       span.innerHTML = "动态创建的元素";

          d.appendChild(span);
   };

// ★★★★★支持动态添加事件
             var d=document.getElementById('d');
       d.onclick=function(e){
            var tar=e.target;
            if(tar.nodeName!=='SPAN'){
                return;//这里也有阻止事件冒泡的作用
        }
        alert(123);

       };

       var btn=document.getElementById('btn');
       btn.onclick=function(){

         var span=document.createElement('span');
           span.innerHTML='动态创建的元素 ';
             d.appendChild(span);

}

   </script>
</body>

</html>