js 事件绑定on()的用法，以及对于其他绑定事件的比较

事件绑定
1，jQuery 中的on绑定事件的方法:
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自从jQuery 1.7 版本之后，on() 方法是bind() 、live()、和 delegate() 方法的新的替 代品，所以我推荐使用这个方法，他简化了jQuery 代码库。

例子1：

<button class="btn">on点击我</button>
<script>
$().ready(function(){
    $('.btn').on('click',function(){
        $(this).css('background','green');
    })
})
</script>

跟on()方法类似的 几种事件绑定函数（bind() 、live()、和 delegate() ）的用法以及，怎么用on()方法来替代这些方法达到同样的效果：

① : 利用on()方法代替bind()方法达到同样的效果

<button class="btn">on点击我</button>
<button class="btn1">bind点击我</button>
<script>

$().ready(function(){
    $('.btn').on('click',function(){
        $(this).css('background','green');
    })
})
$().ready(function(){
    $('.btn1').bind('click',function(){
        $(this).css('background','#yellow');
    })
})

</script>

② : 利用on()方法代替live()方法达到同样的效果

<button class="btn">on点击我</button>
<button class="btn1">live点击我</button>
   <script>
       $().ready(function(){
            $('.btn').on('click',function(){
                $(this).css('background','green');
            })
        })
       $().ready(function(){
            $('.btn1').live('click',function(){
                $(this).css('background','yellow');
            })
        })
  </script>

③ : 利用delegate()方法代替live()方法达到同样的效果

<div id="div1">
    <p>on方法点击.</p>
</div>

<div id="div2">
    <p>delegate方法点击.</p>
</div>

<script>
    $().ready(function(){
        $('#div1').on('click','p',function(){
            $(this).css('background','green');
        })
    })
    $().ready(function(){
        $('#div2').delegate('p','click',function(){
            $(this).css('background','yellow');
        })
    })
</script>

2，jQuery 中的on绑定事件解除的方法: off()

提示：如果需要移除绑定的事件，不让它执行，那么需要是要 off() 方法

<button class="btn">on点击我</button>
<button class="btn2">点击我取消绑定的点击事件</button>
<script>
    $().ready(function(){
        $('.btn').on('click',function(){
            $(this).css('background','green');
        });
        $('.btn2').click(function(){
            $('.btn').off('click')
        })
    })
</script>

3，jQuery 中的on方法添加多个事件处理程序

注释：做了一个鼠标移入移出自动添加class的效果

<div id="div2">
<p>Click to set background color using the delegate() method.</p>
</div>
<style>
    .red1{color:#c90b45;}
</style>
<script>

$().ready(function(){
    $('#div2 p').on('mouseover mouseout',function(){
        $(this).toggleClass('red1')
    });

})

多个事件绑定还有另外一种写法，我感觉这种方法更加方便，更容易修改：
注释：做了一个鼠标移入移出，以及点击自动改变文字颜色的效果

<div id="div2">
<p>Click to set background color using the delegate() method.</p>
</div>
<style>
    .red1{color:#c90b45;}
</style>
<script>
$().ready(function(){
    $('#div2 p').on({
        mouseover: function(){
            $(this).css('color','#c90b45');
        },
        mouseout: function(){
            $(this).css('color','green');
        },
        click: function(){
            $(this).css('color','#000');
        }
    });

})