jq新版事件绑定.on()、解绑事件off()用法详解

jquery1.4 及之前的版本，由.click() 或 .bind()方法绑定的事件，不能适用脚本创建的新元素：即是说页面加载完成后，再动态创建的DOM元素并不能响应之前绑定的事件！

旧版本的处理方法是使用.live()方法来代替事件绑定.bind()，使得绑定的事件能适用脚本创建的新元素。

但自jq1.7版本开始，官方已明文表示不再推荐使用使用.live()方法，官方解释为：live()调用过程首先将事件方法绑定到了Document，然后，查找Document里是否有匹配元素。 这个过程对于性能来说可能比较浪费。官方推荐将.live()改成Delegate()方法，适用脚本创建的新元素。

q1.8开始，官方又再次申明：如果你开发最新版本的jQuery，完全可以使用on()方法来处理所有的事件绑定，避免过多的方法调用,因为其实在最新版本的jQuery类库中，所有以上旧版方法在后面其实都是调用on()方法。

本文将详细介绍jq1.8中.on()用法，相关用法源码如下：

<!--实例效果文字描述，可删-->
    <div class="demonstrate">
        <div class="description">
            <h3>jq新版事件绑定.on()、解绑事件off()用法详解</h3>
            <p>年月日 星期 时分秒</p>
        </div>
        <div id="demo">
            <ul>
                <li>1 点我有3弹窗</li>
                <li>2 点我有3弹窗</li>
                <li>3 点我有3弹窗</li>
                <li>4 点我有3弹窗</li>
            </ul>
            <div style="clear:both;">
                <p>
                    <a href="javascript:;" class="bind">js->添加一个li,添加的li也能响应之前绑定的事件！</a>
                </p>
                <p>
                    <a href="javascript:;" class="unbindAllclick">解绑li 所有click事件</a>
                </p>
                <p>
                    <a href="javascript:;" class="unbindSpecifyclick">解绑li 指定事件函数的click事件2</a>
                </p>
                <p>
                    <a href="javascript:;" class="unbindNamespace">解绑li 同一命名空间中的click事件2、mouseout事件</a>
                </p>
            </div>
        </div>
    </div>
        <script type="text/javascript">
// js创建新元素
$(".bind").on("click",function(){
    $("ul").append("<li/>");
    var temp=$("ul li").last();
    temp.html($("ul li").length +"响应点击事件？");
});
// 旧版写法: 事件不能适用脚本创建的新元素
// $("ul li").bind("click",function(){
//     alert("不响应事件!");
// })
// 旧版事件.live()：适用脚本创建的新元素写法,live()调用过程如下：我们首先将click方法绑定到了Document，然后，查找Document里是否有这个元素。 这个过程对于性能来说可能比较浪费
// $("ul li").live("click",function(){
//     alert("响应事件!");
// })
// 新版写法一：单纯将bind改成on，事件不能适用脚本创建的新元素
// $("ul li").on("click",function(){
//     alert("不响应事件!");
// })
// 新版写法二：将live改成Delegate，适用脚本创建的新元素
// $(".demonstrate").delegate("ul li","click",function(){
//     alert("响应事件!");
// })
// 新版写法三：适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）
// $(ele).on() ele 为匹配元素的父元素，可指定为document/body ,但从查找document/body向下检索匹配元素这个过程对于性能来说，比较浪费，推荐定成匹配元素就近的父元素！！
//如果你开发最新版本的jQuery，完全可以使用on()方法来处理所有的事件绑定，避免过多的方法调用,因为其实在最新版本的jQuery类库中，所有以上旧版方法在后面其实都是调用on()方法
$(".demonstrate").on("click","ul li",function(e){
    alert("响应"+e.type+"事件1!");
});
$(".demonstrate").on("click.namespace","ul li",eventFunc=function(e){
    alert("响应"+e.type+"事件2!");
});
$(".demonstrate").on("mouseout.namespace","ul li",function(e){
    alert("响应"+e.type+"事件!");
});
// 新版多事件同时绑定写法
//$(".demonstrate").on({
//    mouseover:function(){
//    $(this).addClass("over");
//    },
//    mouseout:function(){
//    $(this).removeClass("over");
//    }
//},"ul li")
//
//$(".demonstrate").on("mouseover mouseout","ul li",function(e){
//    if(e.type=="mouseover"){
//        $(this).addClass("over");
//    }else{
//        $(this).removeClass("over");
//    }
//})
// 新版解绑事件写法: 可同时解绑多个事件 空格分隔开各个事件
// 解绑所有点击事件
$(".unbindAllclick").click(function(){
  $(".demonstrate").off('click',"ul li");
})
// 事件函数：可解绑指定事件函数的同类事件,第3个参数：事件函数 (不需要引号)
$(".unbindSpecifyclick").click(function(){
  $(".demonstrate").off('click',"ul li",eventFunc);
})
// 命名空间：解绑同一命名空间中的多类（如click、mouseout等）事件,第1个参数可直接简写命名空间即可，或写成"click.namespace mouseout.namespace"全写形式
$(".unbindNamespace").click(function(){
  $(".demonstrate").off('.namespace',"ul li");
})
</script>