javascript和jQuery的事件代理不同写法
首先思考一下：为什么我们要用到事件代理？？？
- 举个栗子
父元素下现有四个子元素，我们要监听子元素的增减变化，此时我们就需要监听父元素来到达目的
再者我们在子元素上绑定了事件，我们可以用addEvenListener监听器对子元素进行监听，但是如果子元素增加了，我们的监听范围没有发生变化，还是原来的四个元素，那么新增元素就无法监听事件，这就需要把监听器发给到父元素上，那么用jQuery和JavaScript怎么实现呢
HTML
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<input id="ipt" type="text"> <button id="btn">添加</button>
<div id="wrap">
</div>
<script>
$('#btn').on('click', function(){
var value = $('#ipt').val()
$('.box>ul').append('<li>'+value+'</li>')
})
</script>
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
<li>2</li> e.target.tagName='LI'- toLowerCase()是大写变小写
jQuery
$('.box ul').on('click', 'li', function(){
var str = $(this).text()
$('#wrap').text(str)
})
- 这个不解释，不懂得直接查，非常简单
