Jquery的on方法绑定事件

$(selector).on('events',fn)

events：一个或多个用空格分隔的事件类型
selector：元素的子元素选择器
fn：回调函数，即绑定在元素身上的侦听函数

1.on方法可以一次性绑定多个事件

 <div style="height: 100px; width: 100px;background-color: red;">DIV样式</div>
  <ul>
        <li>1</li>
        <li>2</li>
    </ul>

$('div').on({
                mouseenter: function() {
                    $('div').stop();
                    $('div').animate({
                        width: '150px',
                        height: '150px'
                    }, 1000)
                },
                mouseleave: function() {
                    $('div').stop();
                    $('div').animate({
                        width: '80px',
                        height: '80px'
                    }, 1000)
                }
            })

2.很多时候元素是动态生成的，如果在这些元素生成之后没有重新获取一次元素再绑定事件，那么新生成的元素就不会有绑定的事件，而on方法可以直接给这些元素动态绑定事件，不需要每次生成都再去获取一次元素

 $('li').click(function() {
                console.log($(this).index());
            })

            $('ul').append($('<li >3</li>'))
                // 动态插入后点击打印不了<li >3</li>下标
            console.log("-----------分界线-----------");

            // 使用on方法就可以
            $('ul').on('click', 'li', function() {
                console.log($(this).index());
            })

            $('ul').append($('<li >4</li>'))
            $('ul').append($('<li >5</li>'))
            $('ul').append($('<li >6</li>'))