jQuery的绑定与解绑方法

最新推荐文章于 2023-11-17 22:13:38 发布
最新推荐文章于 2023-11-17 22:13:38 发布
阅读量754 收藏 3
点赞数 1
分类专栏： CSS JavaScript jQuery 文章标签： jQuery的绑定与解绑方法 bind与unbind live与die delegate绑定与解绑 on和off的绑定与解绑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/super_DuoLa/article/details/118674030
版权
JavaScript 同时被 3 个专栏收录
57 篇文章 4 订阅
订阅专栏
CSS
5 篇文章 0 订阅
订阅专栏
jQuery
2 篇文章 0 订阅
订阅专栏

jQuery的4种绑定方法

一、bind()与unbind()

I、bind()：绑定

1、定义

规定向被选元素添加的一个或多个事件处理程序，以及当事件发生时运行的函数。

2、语法

$(selector).bind(event,data,function)

3、参数

参数描述
event必需。规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。如click(点击)、change(改变)、mouseover（鼠标移入/鼠标浮上）等事件
data可选。规定传递到函数的额外数据。
function必需。规定当事件发生时运行的函数。

4、案例

（1）绑定单一事件

给id为trigger的元素绑定click事件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>防止多次点击</title>
     <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
	 <div style="height: 300px;width: 200px;background-color: green"></div>
	   <a href="#" id="trigger">绑定事件</a>
	   <script type="text/javascript">
		    $("#trigger").bind('click',function(){
		        alert("哇哈哈哈");
		    });   
	  </script>
  </body>
</html>

效果：点击“绑定事件”后出现弹窗
在这里插入图片描述

（2）绑定多个事件

给id为trigger的元素同时绑定click和mouseover事件【多个事件之间用空格隔开】

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>防止多次点击</title>
     <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
	 <div style="height: 300px;width: 200px;background-color: green"></div>
	   <a href="#" id="trigger">绑定事件</a>
	   <script type="text/javascript">
		    $("#trigger").bind('click mouseover',function(){
		        alert("哇哈哈哈");
		    });
	  </script>
  </body>
</html>

效果：鼠标移入与点击“绑定事件”后均会出现弹窗
在这里插入图片描述

II、unbind()：解绑

1、定义

规定从指定元素上删除的一个或多个事件处理程序。如果没有规定参数，unbind() 方法会删除指定元素的所有事件处理程序。ubind() 适用于任何通过 jQuery 附加的事件处理程序。

2、语法

$(selector).unbind(event,function)

3、参数

参数描述
event可选。规定删除元素的一个或多个事件，由空格分隔多个事件值。如果只规定了该参数，则会删除绑定到指定事件的所有函数。
function可选。规定从元素的指定事件取消绑定的函数名。

4、案例

（1）解绑具体事件

解绑“鼠标移入”事件：执行“解绑事件”后，“鼠标移入”事件失效，但“点击”事件依然有效

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>防止多次点击</title>
     <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
	<div style="height: 300px;width: 200px;background-color: green"></div>
	   <a href="#" id="trigger">绑定事件</a>
	    <a href="#" onclick="untri()">解绑事件</a>
	   <script type="text/javascript">
		    $("#trigger").bind('click mouseover',function(){
		        alert("哇哈哈哈");
		    });
		    function untri(){
		    	$("#trigger").unbind('mouseover'); 
		    	alert("已解绑");
		    }
	  </script>
  </body>
</html>

效果：执行“解绑事件”后，鼠标再次移入“绑定事件”时没反应，但点击“绑定事件”时出现弹窗
在这里插入图片描述

（2）解绑全部事件

解绑全部事件：执行“解绑事件”后，“鼠标移入”与“点击”事件均失效

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>防止多次点击</title>
     <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
	 <div style="height: 300px;width: 200px;background-color: green"></div>
	   <a href="#" id="trigger">绑定事件</a>
	    <a href="#" onclick="untri()">解绑事件</a>
	   <script type="text/javascript">
		    $("#trigger").bind('click mouseover',function(){
		        alert("哇哈哈哈");
		    });
		    function untri(){
		    	$("#trigger").unbind(); 
		    	alert("已解绑全部");
		    }   
	  </script>
  </body>
</html>

效果：执行“解绑事件”后，鼠标再次移入和点击“绑定事件”时均没反应
在这里插入图片描述

二、live()与die()

I、live()：绑定

1、定义

规定
向被选元素添加的一个或多个事件处理程序，以及当事件发生时运行的函数。live() 方法在 jQuery 版本 1.7 中被废弃，在版本 1.9 中被移除。

2、语法

$(selector).live(event,data,function)

3、参数

参数描述
event必需。规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。如click(点击)、change(改变)、mouseover（鼠标移入/鼠标浮上）等事件
data可选。规定传递到函数的额外数据。
function必需。规定当事件发生时运行的函数。

4、案例

此处可发现，我多引用了一个js文件，这也是已废弃的方法为何还能使用的原因（点击了解详情）

（1）绑定单一事件

给id为trigger的元素绑定click事件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>防止多次点击</title>
     <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
     <script src="js/jquery-migrate-1.1.1.min.js" type="text/javascript"></script>
	 <div style="height: 300px;width: 200px;background-color: green"></div>
	   <a href="#" id="trigger">绑定事件</a>
	   <script type="text/javascript">
		    $("#trigger").live('click',function(){
		        alert("哇哈哈哈");
		    });   
	  </script>
  </body>
</html>

效果：点击“绑定事件”后出现弹窗
在这里插入图片描述

（2）绑定多个事件

给id为trigger的元素同时绑定click和mouseover事件【多个事件之间用空格隔开】

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>防止多次点击</title>
     <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
     <script type="text/javascript" src="js/jquery-migrate-1.1.1.min.js"></script>
	   <div style="height: 300px;width: 200px;background-color: green"></div>
	   <a href="#" id="trigger">避免点击事件的多次触发</a>
	   <script type="text/javascript">
		    $("#trigger").live('click mouseover',function(){
		        alert("哇哈哈哈");
		    });
	  </script>
  </body>
</html>

效果：鼠标移入与点击“绑定事件”后均会出现弹窗
在这里插入图片描述

II、die()：解绑

1、定义

规定从指定元素上删除的一个或多个事件处理程序。如果没有规定参数，unbind() 方法会删除指定元素的所有事件处理程序。

2、语法

$(selector).die(event,function)

3、参数

参数描述
event可选。规定删除元素的一个或多个事件，由空格分隔多个事件值。如果只规定了该参数，则会删除绑定到指定事件的所有函数。
function可选。规定从元素的指定事件取消绑定的函数名。

4、案例

（1）解绑具体事件

解绑“鼠标移入”事件：执行“解绑事件”后，“鼠标移入”事件失效，但“点击”事件依然有效

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>防止多次点击</title>
     <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
     <script src="js/jquery-migrate-1.1.1.min.js" type="text/javascript"></script>
</style>
	<div style="height: 500px;width: 200px;background-color: green"></div>
	   <a href="#" id="trigger">绑定事件</a>
	    <a href="#" onclick="untri()">解绑事件</a>
	   <script type="text/javascript">
		    $("#trigger").live('click mouseover',function(){
		        alert("哇哈哈哈");
		    });
		    function untri(){
		    	  $("#trigger").die('mouseover'); 
		    	  alert("已解绑");
		    }
		   
	  </script>
  </body>
</html>

效果：执行“解绑事件”后，鼠标再次移入“绑定事件”时没反应，但点击“绑定事件”时出现弹窗
在这里插入图片描述

（2）解绑全部事件

解绑全部事件：执行“解绑事件”后，“鼠标移入”与“点击”事件均失效

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>防止多次点击</title>
     <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
     <script src="js/jquery-migrate-1.1.1.min.js" type="text/javascript"></script>
</style>
	<div style="height: 500px;width: 200px;background-color: green"></div>
	   <a href="#" id="trigger">绑定事件</a>
	    <a href="#" onclick="untri()">解绑事件</a>
	   <script type="text/javascript">
		    $("#trigger").live('click mouseover',function(){
		        alert("哇哈哈哈");
		    });
		    function untri(){
		    	  $("#trigger").die(); 
		    	  alert("已解绑全部");
		    }
	  </script>
  </body>
</html>

效果：执行“解绑事件”后，鼠标再次移入和点击“绑定事件”均无效果
在这里插入图片描述

三、delegate()与undelegate()

I、delegate()：绑定

1、定义

为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。适用于当前或未来的元素（比如由脚本创建的新元素，即动态生成的元素）。

2、语法

 $(selector).delegate(childSelector,event,data,function)

3、参数

参数描述
childSelector必需。规定要添加事件处理程序的一个或多个子元素。
event必需。规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。如click(点击)、change(改变)、mouseover（鼠标移入/鼠标浮上）等事件
data可选。规定传递到函数的额外数据。
function必需。规定当事件发生时运行的函数。

4、案例

（1）绑定单一事件

给div下的a标签绑定click事件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>防止多次点击</title>
     	<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
		<div style="height: 300px;width: 200px;background-color: pink;padding:50px;">
	   		 <a href="#" id="trigger">绑定事件</a>
	    </div>
	    <script type="text/javascript">
	    	$('div').delegate('a','click',function(){
		        alert("哇哈哈哈");
		    });
	   </script>
  </body>
</html>

效果：点击“绑定事件”后出现弹窗
在这里插入图片描述

（2）绑定多个事件

给div下的a标签同时绑定click和mouseover事件【多个事件之间用空格隔开】

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>防止多次点击</title>
     	<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
		<div style="height: 300px;width: 200px;background-color: pink;padding:50px;">
	   		 <a href="#" id="trigger">绑定事件</a>
	    </div>
	    <script type="text/javascript">
	    	$('div').delegate('a','click mouseover',function(){
		        alert("哇哈哈哈");
		    });
	   </script>
  </body>
</html>

效果：鼠标移入与点击“绑定事件”后均会出现弹窗
在这里插入图片描述

II、undelegate()：解绑

1、定义

删除由 delegate() 方法添加的一个或多个事件处理程序。必须是由delegate绑定的方法才有效噢

2、语法

$(selector).undelegate(selector,event,function)

3、参数

参数描述
selector可选。规定需要删除事件处理程序的选择器。
event可选。规定需要删除处理函数的一个或多个事件类型。
function可选。规定要删除的具体事件处理函数。

4、案例

（1）解绑具体事件

解绑“鼠标移入”事件：执行“解绑事件”后，“鼠标移入”事件失效，但“点击”事件依然有效

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>防止多次点击</title>
     	<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
		<div style="height: 300px;width: 200px;background-color: pink;padding:50px;">
	   		 <a href="#" id="trigger">绑定事件</a>
	    </div>
	    <a href="#" onclick="untri()">解绑事件</a>
	    <script type="text/javascript">
	    	$('div').delegate('a','click mouseover',function(){
		        alert("哇哈哈哈");
		    });
			
	    	 function untri(){
	    		 $('div').undelegate('a','click'); 
	    		 alert("已解绑全部事件");
	    	} 
	   </script>
  </body>
</html>

效果：执行“解绑事件”后，鼠标再次移入“绑定事件”时没反应，但点击“绑定事件”时出现弹窗
在这里插入图片描述

（2）解绑全部事件

解绑全部事件：执行“解绑事件”后，“鼠标移入”与“点击”事件均失效
注意解绑的格式，不能写子元素，且会解绑所有子元素事件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>防止多次点击</title>
     	<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
		<div style="height: 300px;width: 200px;background-color: pink;padding:50px;">
	   		 <a href="#" id="trigger">绑定事件</a>
	    </div>
	    <a href="#" onclick="untri()">解绑事件</a>
	    <script type="text/javascript">
	    	$('div').delegate('a','click mouseover',function(){
		        alert("哇哈哈哈");
		    });
	    	 function untri(){
	    		 $('div').undelegate(); 
	    		 alert("已解绑全部事件");
	    	} 
	   </script>
  </body>
</html>

效果：执行“解绑事件”后，鼠标再次移入和点击“绑定事件”均无反应
在这里插入图片描述

四、on()与off()

I、on()：绑定

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

1、定义

在被选元素或其子元素上添加一个或多个事件处理程序。使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素，即动态生成的元素）。超级厉害的方法，元素本身与其子元素均适用

2、语法

 $(selector).on(event,childSelector,data,function)

3、参数

参数描述
event必需。规定要从被选元素添加的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。如click(点击)、change(改变)、mouseover（鼠标移入/鼠标浮上）等事件
childSelector可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data可选。规定传递到函数的额外数据。
function必需。规定当事件发生时运行的函数。

4、案例

由于涉及到当前与子元素和单一和多个事件情况，案例详情太多，不再一一列举，具体案例可参考以上进行照葫芦画瓢，此处仅做2种情况演示，如下所示

（1）绑定单一事件

给div下的a标签绑定click事件【注意语法格式噢，先方法再元素】

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>防止多次点击</title>
     	<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
		<div style="height: 300px;width: 200px;background-color: pink;padding:50px;">
	   		 <a href="#" id="trigger">绑定事件</a>
	    </div>
	    <script type="text/javascript">
	    	$('div').on('click','a',function(){
		        alert("哇哈哈哈");
		    });
	   </script>
  </body>
</html>

效果：点击“绑定事件”后出现弹窗
在这里插入图片描述

（2）绑定多个事件

给id为trigger的元素同时绑定click和mouseover事件【多个事件之间用空格隔开】

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>防止多次点击</title>
     	<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
		<div style="height: 300px;width: 200px;background-color: pink;padding:50px;"></div>
		<a href="#" id="trigger">绑定事件</a>
	    <script type="text/javascript">
	    	$('#trigger').on('click mouseover',function(){
		        alert("哇哈哈哈");
		    });
	   </script>
  </body>
</html>

效果：鼠标移入与点击“绑定事件”后均会出现弹窗
在这里插入图片描述

II、off()：解绑

自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

1、定义

通常用于移除通过 on() 方法添加的事件处理程序。只能是on绑定的方法才有效噢

2、语法

 $(selector).off(event,selector,function(eventObj),map)

3、参数

参数描述
event必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
selector可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。
function(eventObj)可选。规定当事件发生时运行的函数。
map规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

4、案例

由于涉及到当前与子元素和单一和多个事件情况，案例详情太多，不再一一列举，具体案例可参考以上进行照葫芦画瓢，此处仅做2种情况演示，如下所示

（1）解绑具体事件

解绑div下a标签的“鼠标移入”事件：执行“解绑事件”后，“鼠标移入”事件失效，但“点击”事件依然有效【注意语法格式噢，先方法再元素】

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>防止多次点击</title>
     	<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
		<div style="height: 300px;width: 200px;background-color: pink;padding:50px;">
	   		 <a href="#" id="trigger">绑定事件</a>
	    </div>
	    <a href="#" onclick="untri()">解绑事件</a>
	    <script type="text/javascript">
	    	$('div').on('click','a',function(){
		        alert("哇哈哈哈");
		    });
	    	 function untri(){
	    		 $('div').off('click','a');
		    	  alert("已解绑div下a标签的点击事件");
		    } 
	   </script>
  </body>
</html>

效果：执行“解绑事件”后，鼠标再次移入“绑定事件”时没反应，但点击“绑定事件”时出现弹窗
在这里插入图片描述

（2）解绑全部事件

解绑全部事件：执行“解绑事件”后，“鼠标移入”与“点击”事件均失效

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>防止多次点击</title>
     	<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
		<div style="height: 300px;width: 200px;background-color: pink;padding:50px;"></div>
		<a href="#" id="trigger">绑定事件</a>
		<a href="#" onclick="untri()">解绑事件</a>
	    <script type="text/javascript">
	    	$('#trigger').on('click mouseover',function(){
		        alert("哇哈哈哈");
		    });
	    	function untri(){
	    		 $('#trigger').off();
		    	  alert("已解绑trigger的全部事件");
		    } 
	   </script>
  </body>
</html>

效果：执行“解绑事件”后，鼠标再次移入和点击“绑定事件”时均无效
在这里插入图片描述

总结

以上就是jQuery绑定与解绑事件的4种方法，自 jQuery 版本 1.7 起，on() 和 off() 方法是在元素上添加和移除事件处理程序的首选方法。

super_.
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery事件多次绑定与解绑问题实例分析
10-17
主要介绍了jQuery事件多次绑定与解绑问题,结合实例形式分析了jQuery事件多次绑定情况下的运行情况,以及解绑相关操作技巧,需要的朋友可以参考下
jQuery---解除事件
Philo的博客
01-26 4975
jQuery—解除事件 常见的解除事件有三种，往往取决与你绑定事件所用的关键字： 举例1： //绑定事件，使用id选择器给btn1绑定点击事件 $("#btn1").on("click",function(){ console.log("点击事件") }).mouseenter(function(){ console.log("鼠标聚焦事件") }) //点击第二个按钮，解除第一个按钮事件 $("#btn2").on("click",function()
03-jQuery-事件绑定【click() 、on()】、事件切换toggle()、事件方法、样式控制
记录java学习日常~
05-20 5877
on() 方法是 jQuery 中最常用且最通用的事件绑定方法，可以绑定多个事件类型，并为每个事件类型指定一个或多个处理程序。click() 方法是一种简洁的事件绑定方法，只能绑定 click 事件，并且只允许绑定一个处理程序，无法为同一个元素绑定多个处理程序。off() 方法用于移除之前绑定的事件处理程序，它需要传递一个或多个事件类型参数，并为这些事件类型制定要移除的处理程序。jQuery 事件绑定中，on() 方法用于为元素添加事件处理程序，off() 方法则用于移除绑定的事件处理程序。
jQuery事件注册及处理
weixin_45785652的博客
06-05 288
jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下： 优点: 操作简单，且不用担心事件覆盖等问题。 缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。 语法 演示代码 <body> <div></div> <script> $(function() { // 1. 单个事件注册 $("div").click(function(
【Java 进阶篇】深入浅出：JQuery 事件绑定的奇妙世界
最新发布
繁依Fanyi的博客
11-17 547
事件绑定是指在特定的 HTML 元素上设置一个监听器，用于捕捉用户触发的事件（比如点击、输入、鼠标移动等），并执行相应的操作。在 JQuery 中，事件绑定通常使用on方法来完成。
分享一个jquery重复绑定事件的问题
沐雨橙风ιε的博客
07-30 489
分享一个jquery重复绑定事件的问题
jquery事件绑定解绑机制源码解析
10-21
主要为大家详细介绍了jquery事件绑定解绑机制源码，感兴趣的小伙伴们可以参考一下
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
10-17
主要介绍了jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用,结合实例形式较为详细的分析了jQuery事件绑定、解绑、事件冒泡、阻止冒泡等相关原理与应用技巧,需要的朋友可以参考下
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
10-20
下面小编就为大家带来一篇浅谈jQuery的bind和unbind事件(绑定和解绑事件)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery事件绑定与解绑
执笔丶画苍生的博客
08-13 2731
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)
jQuery事件绑定与解除绑定实现方法
10-24
主要介绍了jQuery事件绑定与解除绑定实现方法,实例分析了jQuery中bind与unbind方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
前端学习（146）：伪类选择器checked和disable和focus
歌谣的博客
12-18 603
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
jquery给单选按钮赋值_JQuery
weixin_39630637的博客
12-09 1124
学习主题：JQuery学习目标：1 掌握Jquery操作文本和值2 掌握Jquery的事件1. 操作页面元素的属性2(1) 想要操作元素的属性有几种方式，请列举。//获得id名称是inp1对象节点 var inp1=document.getElementById("inp1"); //方式一： 获得元素的属性 var ty=inp1.type; var va=inp1.value; var na=...
jQuery---绑定事件
Philo的博客
01-23 7158
js—绑定事件 文章目录一、最常用方法二、bind函数三、on函数四、delegate函数 一、最常用方法 $(“元素选择器”).事件名称(匿名函数) 举例1： //这里的button为元素选择器，click为鼠标点击事件 $("button").click(function(){ //函数内容 }) 举例2： //这里的#btn1为id选择器即id名为btn1的元素，mouseenter为鼠标聚焦事件 $("#btn1").mouseenter(function(){
jQuery动态绑定事件的方法（超详细）
zy1992As的博客
03-08 4336
以上只是一些常用的jQuery动态绑定事件的方法，jQuery还提供了许多其他方法来处理事件，如.keydown()、.keyup()、.submit()等等。1..on()：这是一个通用的事件绑定方法，可以用于任何事件类型，包括自定义事件。4..delegate()：这是一种早期的事件委托方法，已被.on()取代。5..live()：这是一种早期的事件委托方法，已被.on()取代。3..bind()：这是一个早期的绑定方法，它允许绑定多个事件处理程序，但已被.on()取代。
Jquery实现数据双向绑定（赋值和取值），类似AngularJS
热门推荐
深南大道
11-25 1万+
Jquery实现数据双向绑定（赋值和取值） $(document).ready(function () { var objData = { 'id': 1, 'name': '张三', 'area': 'hexi',
jQuery如果上了数据绑定。
Web_boom的博客
09-27 340
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。有需要的小伙伴，可以点击下方卡片领取，无偿分享。
jQuery绑定和解绑点击事件及重复绑定解决办法
说：/~不了的专栏
10-14 9937
绑点击事件这个是jquery一个常用的功能，如click,unbind等等这些事件绑定事情，但还有很多朋友不知道，下面我来给大家介绍jQuery绑定和解绑点击事件及重复绑定解决办法,有需要了解的同学可参考。
jquery插件内部方法
05-09
此外，插件内部方法还可以提高插件的性能和效率，因为它们可以在插件执行期间直接调用，而不需要再次进行绑定和解绑操作。这使得插件的响应速度更加快速且效果更加出众。 总之，插件内部方法是一种非常有用的方法，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值