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元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数

参考代码：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left div,
    .right div {
         500px;
        height: 50px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }
    
    .left div {
        background: #bbffaa;
    }
    
    .right div {
        background: yellow;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>on事件委托</h2>
    <div class="left">
        <div class="aaron">
            <a>点击这里</a>
        </div>
    </div>
    <script type="text/javascript">
    //给body绑定一个click事件
    //没有直接a元素绑定点击事件
    //通过委托机制，点击a元素的时候，事件触发
    $('body').on('click', 'a', function(e) {
       alert(e.target.textContent)
    })
    </script>
</body>

</html>

慕课网上的一节，感觉挺有趣，看了下面很多同学的理解，我觉的有几个说的很好：

1.本来事件绑定在body上，点a会冒泡到body，但指定了第二个参数是a，也就不往上冒了。

2.借鉴其他大牛的一个例子：收快递例子有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

两层意思：
1.现在委托前台的同事是可以签收的，即程序中的现有的dom节点是有事件的；
2.新员工也是可以被前台mm代为签收的，即程序中新添加的dom节点也是有事件的；

3.

简单的讲, 加了第二个参数( selector )后, 如果触发了事件( event ), 就调用函数(fn) ,并逐级向上冒泡查找还有没有这个选择器.

$('body').on('click', 'div', function(e) {
alert(this.className)
})

// aaron
// left

我们将第二个参数替换成div, 并显示div的类名就很容易懂了

4.

我的个人理解就是先从过滤元素开始网上冒泡，找到所有过滤元素。

这时候只弹出p，因为选择器选择了p，然后往上冒泡找到所有p，改成a，弹出a

如果我改成div，则回调两次函数，依次弹出aaron,left.