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的交互次数，提升性能；

 

最后，使用代理的优势以下：

• 使代码简洁

• 减小浏览器的内存占用