jQuery 中事件的移除

最新推荐文章于 2022-08-31 17:45:53 发布

aimartt

最新推荐文章于 2022-08-31 17:45:53 发布

阅读量988

点赞数

分类专栏： jQuery 文章标签： jquery function html button string fun

本文链接：https://blog.csdn.net/aimartt/article/details/7860980

版权

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

jQuery 中事件的移除

参考资料：
《锋利的jQuery》作者：单东林张晓菲魏然出版社: 人民邮电出版社

1、unbind() 方法

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	  	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function() {
				//为"绑定事件"按钮注册多个 click 事件，并为函数取名
				$("#bindEvent").click(fun1 = function() {
					$("#msg").append("<p>绑定函数1</p>");
				}).click(fun2 = function() {
					$("#msg").append("<p>绑定函数2</p>");
				}).click(fun3 = function() {
					$("#msg").append("<p>绑定函数3</p>");
				});
				
				//为"取消绑定事件"按钮注册 click 事件，移除"绑定事件"按钮注册的事件函数
				$("#unBindEvent").click(function() {
					$("#bindEvent").unbind("click", fun2); //移除"绑定事件"按钮上 click 中函数名为 fun2 的函数
					$("#bindEvent").unbind("click");		//移除"绑定事件"按钮上 click 事件的所有函数	
					$("#bindEvent").unbind();	//移除"绑定事件"按钮上注册的所有事件函数		
				});
			});	
		</script>  	
  	</head>
  
  	<!-- HTML -->
  	<body>
  		<button id="bindEvent">绑定事件</button>
  		<button id="unBindEvent">取消绑定事件</button>
  		<div id="msg"></div>
  	</body>
</html>

可以在绑定事件的时候把事件类型用命名空间规范起来，便于管理。如：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	  	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function() {
				//绑定多个事件，并添加命名空间
				$("#nsbtn").bind("click.plugin", function() {
					$("#nsmsg").append("<p>click事件</p>");
				}).bind("mouseover.plugin", function() {
					$("#nsmsg").append("<p>mouseover事件</p>");
				}).bind("mouseout", function() {
					$("#nsmsg").append("<p>mouseout事件</p>");
				});
				
				//移除命名空间为 plugin 的事件
				$("#unsbtn").click(function() {
					$("#nsbtn").unbind(".plugin");
				});
			});	
		</script>  	
		
		<!-- CSS -->
		<style type="text/css">
			.hint {display: none;}
		</style>
  	</head>
  
  	<!-- HTML -->
  	<body>
  		<button id="nsbtn">命名空间按钮</button>
  		<button id="unsbtn">解绑命名空间按钮事件</button>
  		<div id="nsmsg"></div>
  	</body>
</html>

2、one() 方法：如果注册的事件只需要触发一次，使用该方法

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	  	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function() {
				//为"绑定事件"按钮注册多个一次性 click 事件
				$("#bindEvent").one("click", function() {
					$("#msg").append("<p>绑定函数1</p>");
				}).one("click", function() {
					$("#msg").append("<p>绑定函数2</p>");
				}).one("click", function() {
					$("#msg").append("<p>绑定函数3</p>");
				});
			});	
		</script>  	
  	</head>
  
  	<!-- HTML -->
  	<body>
  		<button id="bindEvent">绑定事件</button>
  		<div id="msg"></div>
  	</body>
</html>

aimartt

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery 中事件的移除

jQuery 中事件的移除参考资料：《锋利的jQuery》作者：单东林张晓菲魏然出版社: 人民邮电出版社1、unbind() 方法<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"
复制链接

扫一扫