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)
})
- 这个不解释，不懂得直接查，非常简单
