5-2 on()的高级用法
本节编程练习不计算学习进度，请电脑登录imooc.com操作

on()的高级用法

针对自己处理机制中，不仅有on方法，还有根据on演变出来的live方法(1.7后去掉了)，delegate方法等等。这些方法的底层实现部分 还是on方法，这是利用了on的另一个事件机制委托的机制衍变而来的

委托机制

.on( events ,[ selector ] ,[ data ], handler(eventObject) )

在on的第二参数中提供了一个selector选择器，简单的来描述下

参考下面3层结构

<div class="left">
    <p class="aaron">
        <a>目标节点</a> //点击在这个元素上
    </p>
</div>

给出如下代码：

$("div").on("click","p",fn)

事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数

任务

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <style>
  8.     .left div,
  9.     .right div {
  10.         width: 500px;
  11.         height: 50px;
  12.         padding: 5px;
  13.         margin: 5px;
  14.         float: left;
  15.         border: 1px solid #ccc;
  16.     }
  17.  
  18.     .left div {
  19.         background: #bbffaa;
  20.     }
  21.  
  22.     .right div {
  23.         background: yellow;
  24.     }
  25.     </style>
  26.     <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  27. </head>
  28.  
  29. <body>
  30.     <h2>on事件委托</h2>
  31.     <div class="left">
  32.         <div class="aaron">
  33.             <a>点击这里</a>
  34.         </div>
  35.     </div>
  36.     <script type="text/javascript">
  37.     //给body绑定一个click事件
  38.     //没有直接a元素绑定点击事件
  39.     //通过委托机制，点击a元素的时候，事件触发
  40.     $('body').on('click', 'a', function(e) {
  41.        alert(e.target.textContent)
  42.     })
  43.     </script>
  44. </body>
  45.  
  46. </html>
  47.  
下一节