jQuery基础之事件处理 | jQuery基础之事件处理

jQuery基础之事件处理方法，如下图：

jQuery基础之事件处理-LMLPHP
代码实现：

  <script src="JS/jquery-1.12.4.min.js"></script>

     <script>

         // 事件代理的第一种方式

         // 事件冒泡，子标签的事件会传递给父标签

         // 当点击子标签时会将单击事件传递给父标签，导致父标签也执行单击事件

         $(function(){

             var $div1 = $('#div1');

             $div1.click(function(){

                 alert('父标签' + $div1.html())

             });

             var $div2 = $('#div2');

             $div2.click(function(){

                 alert('子标签' + $div2.html())

             });

         });

         // 事件代理的第二种方式

         // 使用delegate方法完成事件代理

         $(function(){

             // 获取父标签对象

             $div3 = $('#div3');

             $div3.delegate('p','click',function(){

                 // this这是表示子标签元素对象

                 $(this).css({

                     color:'red',

                     width:'300px',

                     height:'200px',

                     background:'yellow'

                 });

             });

         });

     </script>

 <body>

     <div id="div1">111

         <div id="div2">22</div>

     </div>

     <div>

         <div id="div3">

             <p>使用delegate方法完成事件代理</p>

         </div>

     </div>

 </body>