jQuery其他事件 /绑定事件bind /自定义事件

最新推荐文章于 2019-11-10 21:19:38 发布
最新推荐文章于 2019-11-10 21:19:38 发布
阅读量571 收藏 1
点赞数
分类专栏： CSS 文章标签： /jQuery其他事件 /绑定事件bind /自定义事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43152725/article/details/86483286
版权

jQuery其他事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery其他事件</title>
	<style type="text/css">
		
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		// //JS原生写法
		// window.onload = function(){

		// }

		// //jQuery写法，等同于上面写法
		// $(window).load(function(){

		// })

		// //ready的写法
		// $(document).ready(function(){

		// })

		// //ready的简写
		// $(function(){

		// })

		// 窗口改变尺寸的时候，会高频触发
		$(window).resize(function() {
			console.log('3');
		});
	</script>
</head>
<body>
	<div id="div1"></div>
</body>
</html>

绑定事件bind

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绑定事件bind</title>
	<style type="text/css">
		
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			// //只能绑定click事件，不能绑定其他的了
			// $('#btn').click(function() {
			// 	/* Act on the event */
			// });

			//bind方式可绑定多个事件
			$('#btn').bind('click mouseover', function() {
				alert('hello!');

				//取消绑定事件
				$(this).unbind('mouseover');
			});
		})
	</script>
</head>
<body>
	<input type="button" value="按钮" id="btn">
</body>
</html>

自定义事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定义事件</title>
	<style type="text/css">
		
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			//自定义事件只能用bind方式绑定，第一个参数是事件的名字，第二个参数是事件发生时执行的函数
			$('#btn1').bind('hello', function(){
				alert('hello');
			})
			$('#btn1').bind('click', function(){
				alert('click');
			})
			$('#btn2').click(function() {
				// trigger即可以触发自定义事件，也可以触发原始的事件
				$('#btn1').trigger('hello');
				$('#btn1').trigger('click');
			});
			
			//不一定点击按钮触发，也可页面加载时触发，也可在满足某种if条件时触发
			// $('#btn1').trigger('hello');
		})
	</script>
</head>
<body>
	<input type="button" value="按钮" id="btn1">
	<input type="button" value="按钮2" id="btn2">
</body>
</html>
YRyr.*
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原 jQuery其他事件和 绑定事件bind和自定义事件
weixin_43993443的博客
01-15 142
jQuery其他事件 绑定事件bind 绑定事件bind 自定义事件 自定义事件
jquery绑定自定义事件
xiluntao的博客
05-06 5095
jquery绑定自定义事件，可以实现预先绑定好一个处理方法，当需要使用的时候利用jquery trigger来触发自定义事件，以达到方便快捷的目的。 我们来假设一个这样的场景，一个textarea中的字数计算，如果是直接键盘输入或者粘贴进来的话，是可以使用input方法检测到，但是如果是通过js插入的文本，这个时候input事件就监测不到了， 这个时候如果我们事先给绑定一个myChange事件
jquery中自定义事件的事件
bug_404的博客
09-22 415
jquery中提供了两种方法可以绑定自定义事件：bind()和one()，而绑定的自定义事件的触发，必须得用jquery中的trigger()方法才能触发。 首先是用bind()方法： 看代码： 博客 $(function(){ $("h3").bind("test",function(){ alert($(this).text()); });
jQuery Mobile bind()方法---处理自定义事件
jlx1986的专栏
05-28 1362
jQuery Mobile提供的自定义事件建立了超出框架原生功能的shi
jquery 自定义事件绑定与触发 $.one与$.bind效果对比实例
weixin_34358092的博客
03-26 109
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CO...
jquery 自定义事件绑定与触发 $.one与$.bind效果对比实例
为人
02-21 6560
<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Desc
jQuery实现获取绑定自定义事件元素的方法
10-23
本文将详细讲解如何使用jQuery实现获取绑定自定义事件元素的方法，以及涉及到的事件绑定和元素操作技巧。 首先，我们要理解jQuery的事件绑定机制。`$.fn.bind`是jQuery用于绑定事件处理函数的核心方法。默认情况下...
详谈jQuery unbind 删除绑定事件 / 移除标签方法
12-11
jQuery unbind 删除绑定事件 unbind([type],[data]) 是 bind()的反向操作，从每一个匹配的元素中删除绑定的事件。如果没有参数，则删除所有绑定的事件。你可以将你用bind()注册的自定义事件取消绑定。如果提供了事件...
jQuery绑定自定义事件的魔法升级版
10-22
主要介绍了jQuery绑定自定义事件使用技巧,通过循环绑定所有的自定义事件,在恰当的时机调用,需要的朋友可以参考下。
JQuery中bind和unbind函数
Liucheng417的博客
04-12 2886
测试： 页面代码： JQuery代码： $().ready(function(){ for (var i = 0; i < 3; i++) { $("input[type='button']").click(function(){ alert("aaaa");
jQurey 中$.on和$.bind的差别
yugongjie1991的博客
08-29 1334
jquery的bind跟on绑定事件的区别 jquery的bind和on绑定事件的区别 bind和on的绑定事件的区别： jquery文档中bind和on函数绑定事件的用法： .bind(events [,eventData], handler) .on(events [,selector]  [,data], handler)   从文档中可以看出，.on方法比.bind方法多
jQuery绑定事件的方式总结
ANFO的博客
11-10 592
一.bind()方法绑定事件 首先使用属性选择器获取input标签，然后调用bind方法，传入的第一个参数是要绑定的事件名，第二个参数是事件所调用的函数，这里使用匿名函数作为第二个参数，代码和运行结果如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&g...
jquery中bind事件
weixin_30472035的博客
06-14 80
在jquery中bing事件是append而不是replace绑定一次执行一次。当bind多次点击事件时点击一次会把以前把的多次多次都会触发所有有unbind想只触发当前bind的事件在bind的之前unbind之前bind的事件。 事例： $("#moresmall").unbind('click'); $("#moresmall").unbind('click'); $("#...
Jquery中的bind(),on()绑定事件方式总结
奔跑的蜗牛
09-14 7867
一.bind() 使用方式：$(selector).bind(event,data,function) event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等； 　　　　　　　单事件处理：例如 $(selector).bind("click",data,function); 　　　　　　　多事件处理：1.利用空格分隔多事件，例如 $(select
jquery中使用trigger()方法模拟事件
热门推荐
lijunling2008live的专栏
04-13 3万+
使用trigger()方法模拟事件 有时，需要通过模拟用户操作，来达到单击效果。例如在用户进入页面后，就触发click事件，而不需要用户去主动单击。 1.常用模拟 在jQuery中，可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn按钮的click事件。 $("#btn").trigger("click"); 这样，当页面加载完毕后，
jquery绑定事件 bind和on的区别
nO0b
10-12 6209
bind和on都是给元素绑定事件用的,其最大的区别就是事件冒泡 事件冒泡也是委托事件的原型，事件委托就是子类的事情委托给父类的去做 最直观的区别就是on绑定比bind绑定多一个参数'childSelector' 语法 $(selector).on(event,childSelector,data,function) 参数 描述 event 必需。规定要从被选元素移除的一个...
JavaScript-绑定事件的三种方式（原生方式和bind方法）
paku-san的博客
05-30 4091
事件绑定的三种方式第一种直接在标签中绑定事件第二种1. 原生JavaScript代码实现2. 使用JQuery对象转换成JavaScript对象实现第三种1.使用click方法2.使用bind方法a.绑定一个事件b.绑定多个事件取消绑定事件 第一种 直接在标签中绑定事件 <!DOCTYPE html> <html> <head> <meta char...
第 7 章 jQuery 基础.pptx
最新发布
01-25
- jQuery支持多种事件绑定，如`mouseenter`和`mouseleave`，以及自定义复合事件。 9. **任务实践** - 任务描述中提到的是一个典型的jQuery应用示例，通过鼠标悬停事件改变显示的图片和提示信息，这涉及到事件绑定...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值