JS中事件委托原理详解

1 概述

事件委托，也称为事件代理，主要目的包括以下两点：

1. 动态添加为未来的新元素添加事件
2. 提高性能：每一个函数（事件）都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少；

利用的原理是事件冒泡机制。

2 详解

2.1 事件

这是博主的另一篇文章，里面简述了事件的分类和不同处！点击查看！

2.2 事件触发机制

事件捕获和事件冒泡机制

1. 事件捕获
   当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件
2. 事件冒泡
   当事件到达目标节点后，会沿着捕获阶段的路线原路返回。同样，所有经过的节点,都会触发对应的事件
   
   通过例子理解两个事件机制:
   例子：假设有body和body节点下的div均有绑定了一个点击事件.
   效果：
   当为事件捕获(capture:true)时,先执行body的事件,再执行div的事件
   当为事件冒泡(capture:false)时,先执行div的事件,再执行body的事件

    body.addEventListener('click',function(){
    
    
        console.log('打印body')
    })
    test.addEventListener('click',function(){
    
    
        console.log('打印test')
    })

//结果:打印test 打印body

 body.addEventListener('click',function(){
    
    
     console.log('打印body')
 },true)
 test.addEventListener('click',function(){
    
    
     console.log('打印test')
 })
 //结果:打印body 打印test

相信到这里大概也明白事件委托的原理了！