• JavaScript事件委托


    JavaScript事件委托(事件代理)

    • 简单来说就是利用事件冒泡的原理,将原本子元素的事件绑定在父元素上

    事件委托的优点

    • 提升性能,减少事件绑定
     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>Document</title>
     7 </head>
     8 <body>
     9     <ul>
    10         <li>1</li>
    11         <li>2</li>
    12         <li>3</li>
    13     </ul>
    14 </body>
    15 <script>
    16     //获取ul里的li
    17     var lis = document.querySelectorAll('ul li'); 
    18     //循环绑定li的单击事件
    19     for(i=0;i<lis.length;i++){ 
    20         lis[i].onclick = function(){
    21             //单击每个li分别显示各个li的内容
    22             console.log(this.innerText)
    23         }
    24     }
    25     //以上代码是平时我们做事件绑定,而用事件委托的方法只需要给父元素绑定事件
    26     //用法: 事件对象.target.精准的事件源
    27     var ul = document.querySelector('ul');
    28     ul.onclick = function(e){
    29         //判断是否准确点击到了子元素,标签一定要大写
    30         if(e.target.nodeName == "LI"){
    31             console.log(e.target.innerText);
    32         }
    33     }
    34 </script>
    35 </html>
    • 动态添加的子元素也会具有事件
    1     //如果我们又添加一个li放入ul中
    2     var ul = document.querySelector('ul');
    3     var li = document.createElement('li')
    4     li.innerText = 4;
    5     ul.appendChild(li);
    6     //很明显这个li是没有绑定到事件的,那么我们就需要去重新给li绑定事件
    7     //是不是很麻烦,而事件委托就不需要这么做。
  • 相关阅读:
    自动刷新页面
    超链接<A>链接到某个文档
    JS脚本的对话框
    表最后更新的标识列
    c#对象私有属性在重载Equals中的使用
    一个关于在Fedora下安装jdk的问题
    表格的行转列
    UNION和UNION ALL的区别
    关于使用存储过程的一些好处以及注意事项[转]
    SQL 外链接操作小结
  • 原文地址:https://www.cnblogs.com/lry2577/p/12499769.html
Copyright © 2020-2023  润新知