jQuery 中事件的移除

来源：互联网发布：爱知科技几号发工资编辑：程序博客网时间：2024/04/29 21:49

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>