jquery on()方法綁定多個選擇器,多個事件

jquery1.4 及之前的版本，由.click() 或 .bind()方法綁定的事件，不能適用腳本創建的新元素：即是說頁面加載完成后，再動態創建的DOM元素並不能響應之前綁定的事件！

舊版本的處理方法是使用.live()方法來代替事件綁定.bind()，使得綁定的事件能適用腳本創建的新元素。

但自jq1.7版本開始，官方已明文表示不再推薦使用使用.live()方法，官方解釋為：live()調用過程首先將事件方法綁定到了Document，然后，查找Document里是否有匹配元素。 這個過程對於性能來說可能比較浪費。官方推薦將.live()改成Delegate()方法，適用腳本創建的新元素。

jq1.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>

 

 

轉自：http://www.phpvar.com/archives/2529.html