事件代理

javascript和jQuery的事件代理不同写法

首先思考一下：为什么我们要用到事件代理？？？

• 举个栗子
  父元素下现有四个子元素，我们要监听子元素的增减变化，此时我们就需要监听父元素来到达目的
  再者我们在子元素上绑定了事件，我们可以用addEvenListener监听器对子元素进行监听，但是如果子元素增加了，我们的监听范围没有发生变化，还是原来的四个元素，那么新增元素就无法监听事件，这就需要把监听器发给到父元素上，那么用jQuery和JavaScript怎么实现呢
  HTML

  

    
1
    
2
    
3
    
4
  

 添加

JavaScript

document.querySelector('.box ul').addEventListener('click', function(e){
  console.log(e.target)
    if(e.target.tagName.toLowerCase() === 'li'){
        document.getElementById('wrap').innerText=e.target.innerText
    }
})

记住e.target.tagName.toLowerCase()

• e.target是点击事件的html
• 2
• e.target.tagName='LI'
• toLowerCase()是大写变小写
  jQuery

$('.box ul').on('click', 'li', function(){
  var str = $(this).text()
  $('#wrap').text(str)
})

• 这个不解释，不懂得直接查，非常简单