事件代理

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

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