js学习(二)——事件的委派(事件代理)

举例引出事件委派

<!DOCTYPE html>
<html lang="en">
<head>
  <script>
      window.onload=function(){

        var ul=document.getElementById('ul');

          //为每一个超链接都绑定一个单击响应函数
          //这样绑定方式比较麻烦,而且下面这种绑定方式只能为已有的超链接绑定单击响应函数。
          //新添加的超链接必须重新绑定。
        //获取所有的a
          var allA=document.getElementsByTagName('a');
          //遍历
          for(var i=0;i<allA.length;i++){
              allA[i].onclick=function(){
                console.log(this.innerText);  //此处不能写成allA[i].innerText
              };
          }

          //点击按钮后,增加超链接。新建的超链接并没有单击响应函数。
          var button1=document.getElementById('button1');
          button1.onclick=function(){
              var li=document.createElement('li');
              li.innerHTML="<a href='#'>新建超链接</a>";
              
              //将新建的li添加到ul中
              ul.appendChild(li);
          }

      };
  </script>
  
  
</head>
<body>
   <button id='button1'>添加超链接</button>
   <ul id='ul'>
       <li><a href="#">超链接1</a></li>
       <li><a href="#">超链接2</a></li>
       <li><a href="#">超链接3</a></li>
   </ul>
   
</body>

</html>

在这里插入图片描述
在这里插入图片描述

点击按钮后,增加超链接。新建的超链接并没有单击响应函数。
在这里插入图片描述
我们希望,只绑定一次事件,即可应用到多个元素上,即使元素是后添加的。我们可以尝试将其绑定给元素共同的祖先元素。

事件委派——指将事件统一绑定给元素的共同祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素上,从而通过祖先元素的响应函数来处理事件。
事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序性能。

https://www.cnblogs.com/html55/p/10164914.html
在这里插入图片描述

在这里插入图片描述

event中的target表示的是触发事件的对象。
this不是代表的触发事件的对象,在响应函数中,响应函数给谁绑定的,this就代表谁

<!DOCTYPE html>
<html lang="en">
<head>
  <script>
      window.onload=function(){

        var ul=document.getElementById('ul');
        //为ul绑定一个单击响应函数。
        //如果触发事件的对象是我们期望的元素对象,则执行响应函数内部的内容,否则不执行。
        //注意响应函数中,响应函数给谁绑定的,this就代表谁。所以this不是代表的触发事件的对象。此处不能用this来判断
        ul.onclick=function(event){
            event=event||window.event;

            console.log('this:',this);
            console.log('event.target',event.target);
             //如果触发事件的对象是我们期望的元素对象,则执行响应函数内部的内容,否则不执行。
            if(event.target.className=='link'){
                console.log('执行函数');
            }

        }

          //点击按钮后,增加超链接。新建的超链接并没有单击响应函数。
          var button1=document.getElementById('button1');
          button1.onclick=function(){
              var li=document.createElement('li');
              li.innerHTML="<a href='#' class='link'>新建超链接</a>";
              
              //将新建的li添加到ul中
              ul.appendChild(li);
          }

      };
  </script>
  
  
</head>
<body>
   <button id='button1'>添加超链接</button>
   <ul id='ul'>
       <li><a href="#" class="link">超链接1</a></li>
       <li><a href="#" class="link">超链接2</a></li>
       <li><a href="#" class="link">超链接3</a></li>
   </ul>
   
</body>

</html>

点击添加超链接按钮后,
在这里插入图片描述
点击新添加的超链接,结果如下,可以看出新添加的超链接也有单击响应函数。
在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页