JavaScript事件冒泡和事件代理（委托）

一、什么是事件冒泡？

冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。、

看了之后可能你还不理解，那么请看下面代码：

  
    
    
    
    
  
  
    

      
你好
    

    
  

本来在上面的代码中，点击你好只想触发childID元素的onclick事件，然而parentID元素也同时触发了，这就是事件冒泡。

二、如何阻止冒泡事件？

event.stopPropagation()

三、事件代理（委托）

1、意义

在JavaScript中，添加到页面上的事件处理程序的数量，将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因。

每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率越大，100个li就要占用100个内存空间。如果用事件委托，就会将所有的操作放到js程序里面，就只对它的父级(如果只有一个父级)这一个对象进行操作，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能。

2、原理 

事件委托是利用事件的冒泡原理来实现的，使用案例请见下面代码。

  
    
    
    
    
  
  
    

	    
1
        
2
	    
3
	    
4
	    
5
    
    
  

3、优点

• 节省内存
• 使页面性能更好