国产视频app前幾篇文章,我們說了可以利于jQuery中的bind()給指定的元素添加事件,比如加入,點擊(click),獲取焦點(focus),鼠標移入(mouseover)等事件,當然我也可以添加多個事件。今天我們說一說,如何給事件添加命名空間與刪除事件的方法!

jQ給事件添加命名空間

例:給JQ的事件添加一個命名空間

HTML代碼

<p>飛鳥慕魚博客歡迎您!</p>
<button id='button'>測試1</button>
<!--飛鳥慕魚博客-->

未添加命名空間的JQ代碼

$("#button").bind("click",function(){
    $("p").text("鼠標點擊事件");
}).bind("mouseover",function(){
    $("p").text("鼠標移入事件");
}).bind("mouseout",function(){
    $("p").text("鼠標移出事件");
})

添加命名空間后的JQ代碼

jQ給事件添加命名空間

$("#button").bind("click.plugin",function(){
    $("p").text("鼠標點擊事件");
}).bind("mouseover.plugin",function(){
    $("p").text("鼠標移入事件");
}).bind("mouseout",function(){
    $("p").text("鼠標移出事件");
})

注:我們給點擊事件,與鼠標移入事件同樣的命名空間

這兩種的JQ代碼執行的效果是一樣的

相同的事件名,不同的命名空間執行方法

HTML代碼

jQ給事件添加命名空間

<p>飛鳥慕魚博客歡迎您!</p>
<button id='button'>測試1</button>
<button id='button2'>測試2</button>

JQ代碼

$("#button").bind("click.plugin",function(){
    $("p").text("鼠標點擊命名空間事件");
});
$("#button").bind("click",function(){
    $("p").text("這是未命名的事件");
});
$("#button2").click(function(){
    $("#button").trigger("click");
});

JQ代碼2

$("#button").bind("click.plugin",function(){
    $("p").text("鼠標點擊命名空間事件");
});
$("#button").bind("click",function(){
    $("p").text("這是未命名的事件");
});
$("#button2").click(function(){
    $("#button").trigger("click!");//加入!表法匹配所有未命名的事件
});

国产视频app注:JQ代碼2在本地測試時,在JQ版本1.8.1中測試通過,其它高版本未通過,但在鋒利的JQ一書中有此方法的記載!

jQ中刪除事件的unbind()方法

unbind()方法:可以刪除指定元素的事件類型

例子,利用unbing(),刪除一個點擊事件

jQ中刪除事件的unbind()方法

HTML代碼

<p>飛鳥慕魚博客歡迎您!</p>
<button id='button'>測試1</button>
<button id='button2'>測試2</button>
<!--飛鳥慕魚博客-->

JQ代碼

$("#button").bind("click",function(){
    $("p").text("鼠標點擊事件");
}).bind("mouseover",function(){
    $("p").text("鼠標移入事件");
})     
$("#button2").click(function(){
    $("#button").unbind("click");
    //刪除測試1的點擊事件
    //飛鳥慕魚博客
});

結果:

我們點擊測試1的按鈕,發現鼠標與點擊事件正常,如果我們點擊測試2按鈕刪除點擊事件后,再點擊測試1,發現測試1按鈕的點擊事件已經不起作用!

PS:本文系本博客原創,如需要轉載請注明來源本站和地址,不然會追究法律責任呢!