Javascript 冒泡、捕获、事件代理

2019开工荒了两天，赶紧开始！

为什么写事件代理、冒泡、捕获，首先冒泡和捕获是js事件的核心基础，事件代理原理来自冒泡和捕获。

此文章略过标准浏览器和非标准浏览器的事件流讲解，原因很简单我们现在已经幸福了，已经不考虑IE6、7、8了

直接说现代浏览器事件流，用两张图看看什么是冒泡 什么是捕获，其实从字面意思大概能看出 一个是向外一个是向内。

标准事件流

1、捕获阶段 （先从最外层向内查找）
2、目标阶段（找到事件元（当前点击的dom））
3、冒泡阶段（向上冒泡传递事件）

事件冒泡

    
    
    
    




    

        父
        

            子
            

                孙
            
        
    
    

先演示下冒泡

事件捕获

    
    
    
    




    

        父
        

            子
            

                孙
            
        
    
    

看看效果

事件委托

我理解的事件委托的好处有两点
1、减少事件绑定次数
2、可以给未知元素绑定事件（例如动态渲染的List）

其原理就是利用事件冒泡向外传递的特性，下面代码解析一下：
同样忽略低版本浏览器获取当前target兼容性问题

    
    
    
    




    

        1
        2
        3
        4
    
    

老规矩，看看效果

最后顺便说一下事件对象功能很全的，看下图能获取到很多当前dom的周边，可以搞好多其它的事情。

感谢阅读，欢迎吐槽！谢谢！