添加事件命名空间,便于管理

最新推荐文章于 2018-11-23 22:09:08 发布

原创最新推荐文章于 2018-11-23 22:09:08 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery事件命名空间

jquery 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何在jQuery中使用命名空间来规范和管理元素绑定的多种事件类型，通过在事件类型后添加命名空间，实现事件的精确控制与删除。


例如可以把为元素绑定的多个事件类型用命名空间规范起来,jQuery代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style>
	div{width:100px;height:50px;background:#888;color:white;}
 </style>
  <script src="../../scripts/jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(function(){
	$("div").bind("click.plugin",function(){
	       $("body").append("<p>click事件</p>");
	});
	$("div").bind("mouseover.plugin", function(){
	       $("body").append("<p>mouseover事件</p>");
	});
	$("div").bind("dblclick", function(){
		   $("body").append("<p>dblclick事件</p>");
	});
	$("button").click(function() {
		$("div").unbind(".plugin");  
	})
	/*
		click,mouseover 事件被删除，
	*/
  })
  </script>
</head>
<body>
<div>test.</div>
<button >根据命名空间，删除事件</button>
</body>
</html>
在所绑定的事件类型后面添加命名空间，这样在删除事件时只需要指定命名空间即可。
单击<button>元素后,"plugin"的命名空间被删除，而不在"plugin"的命名空间的"dblclick"事件依然存在。