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

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

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

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

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