• Js 中的事件委托/事件代理


    什么叫事件委托/事件代理呢 ?
    JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
     
    事件冒泡:
    当事件发生后,这个事件就要开始传播(从里到外或者从外向里),为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上。
    例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身可能不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中.
     
    事件委托:
    是利用事件的冒泡原理来实现的,何为事件冒泡呢?
    就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:
     
    下边我们来看一个示例:
     <div id="div1">
        <a href="#">a1</a>
        <a href="#">a2</a>
        <a href="#"> a3</a>
        <a href="#">a4</a>
      </div>
    
      <button>
        点击增加一个 a 标签
      </button>

    如果给每个 <a>标签一一都绑定一个事件,那对于内存消耗是非常大的。借助事件代理,我们只需要给父容器div绑定方法即可,这样不管点击的是哪一个后代元素,都会根据冒泡传播的传递机制,把父容器的click行为触发,然后把对应的方法执行,根据事件源,我们可以知道点击的是谁,从而完成不同的事。

    var div1 = document.getElementById('div1')
    div1.addEventListener('click', function (e) {
    // e.target 可以监听到触发点击事件的元素是哪一个
      var target = e.target
      if (e.nodeName === 'A') {
        // 点击的是 <a> 元素
        alert(target.innerHTML)
      }
    })
    为什么要用事件委托:
    一般来说,dom需要有事件处理程序,我们都会直接给它设事件处理程序就好了,那如果是很多的dom需要添加事件处理呢?比如我们有100个li,每个li都有相同的click点击事件,可能我们会用for循环的方法,来遍历所有的li,然后给它们添加事件,那这么做会存在什么影响呢 ?
     
    在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能;
     

    最后,使用代理的优点如下:

    • 使代码简洁

    • 减少浏览器的内存占用

  • 相关阅读:
    Git 基本操作
    Git 基础
    MarkDown教程
    Python常用函数
    Python生成器
    Python列表生成式
    Python迭代
    Python切片
    Python函数
    Python不可变对象
  • 原文地址:https://www.cnblogs.com/hai-cheng/p/10662352.html
Copyright © 2020-2023  润新知