jQuery中添加事件命名空间与删除事件

前几篇文章，我们说了可以利于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代码

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

注：我们给点击事件，与鼠标移入事件同样的命名空间

这两种的JQ代码执行的效果是一样的

相同的事件名，不同的命名空间执行方法

HTML代码

<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(),删除一个点击事件

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