首頁常見問題正文

jQuery框架：事件綁定與切換

更新時間:2023-02-10 來源:黑馬程序眼 瀏覽量:

IT培訓(xùn)班

　　jQuery具有靈活的事件處理機(jī)制，包括對事件的綁定和切換。關(guān)于事件綁定與切換的方法和說明如表15-11所示。

　　表15-11 事件綁定與切換
1675998705108_事件綁定與切換.jpg

　　表15-11列舉了事件綁定與切換的方法，在這些方法的參數(shù)中，events表示事件名(多個用空格分隔)，data表示將要傳遞給事件處理函數(shù)的數(shù)據(jù)，selector表示選擇器，function表示事件處理函數(shù)，type表示添加到元素的事件(多個用空隔分隔)，over和out分別表示鼠標(biāo)移入和移出時的事件處理函數(shù)。

　　下面分別演示事件綁定與切換方法的使用案例。

　　(1)事件的綁定與取消綁定

//on()方法綁定事件
$("div").on("click",function(){
    alert("綁定事件");
});
//off()方法取消綁定
$("div").off("click");

　　(2)綁定單次事件

$("div").one("click",function(){
    alert("綁定單次事件");
});

　　(3)多個事件綁定同一函數(shù)

$("div").on("mouseover mouseout",function(){
    alert("鼠標(biāo)移入或移出");
});

　　(4)多個事件綁定不同的函數(shù)

$("div").on({
    mouseover:function() {
        alert("鼠標(biāo)移入");
    },
    mouseout:function(){
        alert("鼠標(biāo)移出");
    }
});

　　(5)綁定自定義事件

//綁定自定義事件
$("div").on("CustomEvent",function(){
    alert("已觸發(fā)自定義事件");
});
//觸發(fā)自定義事件
$("div").click(function(){
    $("div").trigger("CustomEvent");
});

　　(6)傳遞數(shù)據(jù)到事件處理函數(shù)

function myFunc(event){
    alert("收到消息:"+event.data.msg);
}
$("div").on("click",{msg:"測試數(shù)據(jù)"},myFunc)

　　(7)為以后創(chuàng)建的元素委派事件

//為<body>的子元素<div>委派事件
$("body").on("click","div",function(){
    alert("收到");
});
//創(chuàng)建<div>元素
$("body").append("<div>測試</div>");

　　(8)鼠標(biāo)移入和移出事件切換

$("div").hover(function() {
    alert("切換-鼠標(biāo)移入")
},function(){
    alert("切換-鼠標(biāo)移出");
});

　　(9)隱藏與顯示事件切換

//第一次調(diào)用時隱藏
$("div").toggle();
//第二次調(diào)用時顯示
$("div").toggle();

　　從以上事件綁定與切換的例子中可以看出，jQuery事件處理方法的功能非常豐富，通過靈活地運(yùn)用，可以實(shí)現(xiàn)很多復(fù)雜的頁面交互效果。

　　注意：on()方法與off()方法是jQuery從1.7版本開始新增的方法。jQuery官方推薦使用on()方法進(jìn)行事件綁定，在新版本中已經(jīng)取代了bind()、delegate()和live()方法。

分享到：
在線咨詢 我要報名
和我們在線交談！