前几篇文章,我们说了可以利于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!");//加入!表法匹配所有未命名的事件
});

注: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:本文系本博客原创,如需要转载请注明来源本站和地址,不然会追究法律责任呢!