事件委托---动态创建的元素添加事件

以前经常会出现一个问题，就是用javascript创建的元素，点击事件是失效的，因为当前页面并不会实时监听元素上面是否需要挂载事件。

案例代码如下：

 <button id='btn'>创建元素</button>
 <div id='oDiv'>
      <p class='p1'>第一个p</p>
 </div>
Javascript代码
<script src='jquery.js'></script>
<script>
   $('#btn').click(function(){
      $('#oDiv').append(' <p class='p1'>pppppp</p>');
 });
$('.p1').click(function(){
   console.log('打印');
});
</script>
=================上面后创建的p不会拥有点击事件
<button id="btn">创建</button>
   <div id="div1">
       <ul>
           <li>一个li</li>
           <li>一个li</li>
           <li>一个li</li>
       </ul>
   </div>
   <script src="js/jquery.js"></script>
   <script>
        var $Prent = $("#div1 ul");
       $("#btn").on("click",function(){
          $Prent.append("<li>创建的li</li>");
       });
        $Prent.on("click",function(ev){
           var target =$(ev.target);
           if(target.closest("li").length===1){
               target.closest("li").html("<b style='color:red'>经过事件委托修改的文字</b>");
           }
        });
   </script>

=。=！ 如果你测试就会发现，后创建的li不仅，可以点击，而且li中内容也可以被修改。
总结：
事件委托其实就是根据事件冒泡的原理，所谓的委托就是把（点击，移动，键盘）事件，交给他的父级，甚至祖先元素去完成点击事件，因为事件冒泡会逐级向上冒泡，所以上面案例父级元素获取到了点击事件，
$(ev.target) 通俗点理解target就是目标，也就是说当前事件的对象是谁。
使用jQuery closest();方法，这个方法：
closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象，此案例检测他的length值，0代表没找到值，要注意，closest()参数是数组，或者字符串！