• 事件的委派


    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
       
       window.onload=function(){
        var ul = document.getElementById("ul");
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function(){
    //     超链接在li里   先创建一个li
         var li = document.createElement("li");
         li.innerHTML = "<a href='javascript:;' class='link''>新建超链接</a>"
         
         //将li添加到ul中
         ul.appendChild(li);
         
        }
        
        /*
         * 为每一个超链接都绑定一个单击响应函数
         * 为每一个超链接都绑定一个单击响应函数,这种操作都比较麻烦
         * 而且这些操作只能为已有的超链接设置事件,而新增加的超链接必须重新绑定
         */
        
        //通过标签名获取所有的a标签
        var allA = document.getElementsByTagName("a");
        //遍历
    //    for(var i=0 ; i < allA.length ; i++){
    //     allA[i].onclick = function(){
    //      alert("a的响应函数")
    //     }
        
        /*
         * 只绑定一次事件,即可应用到多个元素上,即使元素是后添加的
         * 尝试将它绑定给元素的共同祖先
         *
         * 事件的委派
         * -指将事件统一绑定给元素的共同祖先,这样当后代元素上的事件触发时,会一直冒泡到祖先元素
         *   从而通过祖先元素的响应函数来处理事件
         * -事件委派是利用了冒泡,通过委派可以减少事件绑定次数,提高程序的性能
         */
        ul.onclick = function(event){
         event=event||window.event;
         /*
          * target
          * -event中的target表示触发事件对象
          */
    //     alert(event.target);
         //如果触发对象是我们所期望的,则执行  否则不执行
         if(event.target.className == "link"){
          alert("ul的单击响应函数");
         }
        
        }
        
       
       }
      </script>
     </head>
     <body>
      <button id="btn01">增加超链接</button>
      <ul id="ul" style="">
       <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>

  • 相关阅读:
    认识岗位-带你一起偷窥产品经理的日常
    SpringBoot单元测试踩坑
    Oracle“ORA-38104: 无法更新ON子句中引用的列”解决方式
    SXSSFWorkbook使用补充
    JAVA复制字符串并用指定字符串拼接
    一个简单for循环的时间复杂度
    SXSSFWorkbook的简单使用
    AOP行为日志
    antV G2 为柱状图添加背景颜色
    AntV G2 图表tooltip重命名
  • 原文地址:https://www.cnblogs.com/weixin2623670713/p/12771975.html
Copyright © 2020-2023  润新知