Web APIs——事件委托

1、事件委托

        事件委托（Event delegation）是一种JavaScript设计模式，用于处理事件监听和处理程序的优化。它通过将事件处理程序绑定到父元素而不是绑定到子元素，从而减少DOM元素上的事件处理程序数量。

事件委托是利用事件流的特征解决一些开发需求的知识技巧

• 优点：减少注册次数，可以提高程序性能
• 原理：事件委托其实是利用事件冒泡的特点
  • 给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件 
• 实现：事件对象.target.tagName 可以获得真正触发事件的元素

例如，如果我们有一个包含多个按钮的列表，并且希望在单击按钮时执行某些操作，则可以将单个事件监听器添加到整个列表。当单个按钮被单击时，事件将冒泡到列表元素，并且我们可以检查事件目标以确定哪个按钮被单击，然后执行相应的操作。这比在每个按钮上都添加一个事件监听器要高效得多。

    
    
    


    

        
第一个孩子
        
第二个孩子
        
第三个孩子
        
第四个孩子
        
第五个孩子
        
我不需要变色
    
    

 2、tab栏切换改造

需求：优化程序，将tab切换案例改为事件委托写法

  
  
  
  
  



  

    

      
每日特价
      

        
精选
        
美食
        
百货
        
个护
        
预告
      
    
    

      

      

      

      

      

    
  
  

3、阻止冒泡

我们在某些情况下需要阻止默认行为的发生，比如 阻止 链接的跳转，表单域跳转

语法：

        e.preventDefault()

    
    
    


    

        
    
    百度一下