首頁常見問題正文

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()方法。

分享到:
在線咨詢 我要報名
和我們在線交談!