事件代理

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) })

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