jQuery中添加事件命名空间与删除事件
墨初 前端设计 5697阅读
前几篇文章,我们说了可以利于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:本文系本博客原创,如需要转载请注明来源本站和地址,不然会追究法律责任呢!