什么是事件委托?

事件委托：

• 利用事件冒泡的原理,将本属于子元素的事件,委托给父元素注册

• 事件冒泡 : 当触发子元素的事件时候，所有的父级元素‘同名事件’会被依次触发

•       //子元素->父元素->body->html->document->window      
        //子元素
        document.querySelector('.son').addEventListener('click',function(){
          alert('我是子元素')
        })
        
        //父元素
        document.querySelector('.father').addEventListener('click',function(){
          alert('我是父元素')
        })
  
         //body
         document.querySelector('body').addEventListener('click',function(){
          alert('我是body')
         })
       
        //html
        document.documentElement.addEventListener('click',function(){
          alert('我是html')
        })
        
  
        //document
        document.addEventListener('click',function(){
          alert('我是document')
        })
        
  
        //window
        window.addEventListener('click',function(){
          alert('我是window')
        })
   

• 事件委托注意点 :

        a.委托事件中,this指向父元素,e.target才是指向触发的子元素

        b.需要判断是不是想要的子元素:e.target.tagName

         

• 事件委托的应用 ：

        多个子元素需要注册同名事件,就可以给父元素注册