jQuery高階事件—on、off、one和事件委託

NO IMAGE

on、off、one

jQuery1.7 以後推出了.on()和.off()方法,替代之前的方法。on/off整合了bind、unbind、事件委託等方法

on替代bind方法

on可以替代bind方法,使用方法和bind一致

// 繫結單個事件
$(":button").on("click",function(){
alert("on");
});
// 傳遞資料
$(":button").on("click",{name:"tom"},function(e){
alert(e.data.name);
});
// 繫結多個事件
$(":button").on("mouseover mouseout",function(e){
alert("移入移出");
});
// 使用物件繫結多個事件
$(":button").on({
mouseover:function(){
alert("移入");
},
mouseout:function(){
alert("移出");
}
});
// 阻止冒泡和預設行為
$(":submit").on("click",function(e){
e.preventDefault();
e.stopPropagation();
alert("取消預設行為和冒泡");
});

off替代unbind方法

off可以替代unbind方法,使用方法不變

    function test(){
alert("test");
}
$(":button").on("click.on",test);  //根據函式解除繫結
$(":button").off("click");     // 根據事件解除繫結
$(":button").off("click.on");  // 根據名稱空間解除繫結

事件委託

實際上是給祖先繫結一個事件。子元素通過冒泡將事傳遞到祖先元素,祖先元素再判斷點選的是不是button,如果是,就執行相同的事件。因此,當有很多個相同的按鈕需要繫結相同的事件時,可以用事件委託將事件委託給祖先節點,有祖先節點判斷子節點是否執行某事件。如果不適用事假委託,那個每一個節點都需要繫結一個事件。
使用方法是:
祖先節點.on(“事件”,”子元素”,”繫結的函式”);

on的第二個引數需要寫成所有相同元素通用的寫法,不能寫成:button:eq(0)這樣的選擇不具有通用性,祖先節點在判斷的時候會無法達到預期的效果。

    $("div:eq(0)").on("click",":button",function(){
$(this).clone(true).appendTo("div:eq(0)");
});
// 換成document也可:
$(document).on("click",":button",function(){
$(this).clone(true).appendTo("div:eq(0)");
});

取消委託

off函式還可以取消委託,取消委託必須由祖先節點呼叫呼叫方法是:
祖先節點.off(“事件”,”子元素”);

$("div:eq(0)").off('click', '.button');

one()

繫結元素執行完畢後自動移除事件,可以方法僅觸發一次的事件。

    $(":button").one("click",function(){
alert("one");
});

用到的方法

clone()

生成被選元素的副本,包含子節點、文字和屬性。
$(selector).clone(includeEvents)
– includeEvents 規定是否複製元素的所有事件處理。true/false,預設是false

appendTo()

在被選元素的結尾(仍然在內部)插入指定內容。

  $("button").click(function(){
$("<b>sss</b>").appendTo("p");
});