jQuery(五) ---[jQuery事件之 ready事件,绑定事件,合成事件,其他常用事件]

最新推荐文章于 2024-07-30 11:51:58 发布

小智RE0

最新推荐文章于 2024-07-30 11:51:58 发布

阅读量884

点赞数 2

分类专栏： jQuery从零开始文章标签： jquery

本文链接：https://blog.csdn.net/MrTumnus/article/details/118877139

版权

jQuery从零开始专栏收录该内容

5 篇文章 0 订阅

订阅专栏

ready事件

当 DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。
ready( ) 函数作为当 ready 事件发生时执行的代码。
ready( ) 函数仅能用于当前文档，因此无需选择器。

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的。响应速度。

语法：

$(document).ready(匿名函数);
$(document).ready(function(){ 在这里写你的代码... });

简单写法：在这里直接写匿名函数；效果相同；

$(fucntion(){
在这里写你的代码...
})

也是等同于window.onload事件;

window.onload=function(){
	要执行的代码;
}

ready事件也就是jquery封装onload事件在网页内容加载后,才执行ready事件里面的内容;

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				alert("后执行");
			});
			alert("先执行");
		</script>
	</head>
	<body>
	</body>
</html>

常用的方式为简写方式;在$()中直接写匿名函数

绑定事件

使用jQuery语法的好处,不用循环也能批量的实现为选中的标签全部绑定事件.

单击

事件	注释
click([[data],fn])	点击时;触发每一个匹配元素的click事件;`这个函数会调用执行绑定到click事件的所有函数`

事件参数	类型	注释
fn	Function	`在每一个匹配元素的click事件中绑定的处理函数`
[data],fn	String,Function	`data:click([Data], fn) 可传入data供函数fn处理; fn:在每一个匹配元素的click事件中绑定的处理函数`

这里参数中使用的是匿名函数

案例:click事件 ;为操作按钮绑定处理函数 ;

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//ready事件;
			$(function(){
				//绑定按钮点击事件;
				$("#btn_ID").click(function(){
					alert("点击按钮就会触发");
				});
			});
		</script>
	</head>
	<body>
		<input type="button"  value="操作按钮" id="btn_ID"/>
	</body>
</html>

在这里插入图片描述

若将alert函数中的参数换为alert(this);则点击annual,会得到此按钮的DOM对象;

在这里插入图片描述

双击

事件	注释
dblclick([[data],fn])	当双击元素时，会发生 dblclick 事件。`当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。在很短的时间内发生两次 click，即是一次双击 click 事件。提示：如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。`

事件参数	类型	注释
fn	Function	`在每一个匹配元素的dblclick事件中绑定的处理函数`
[data],fn	String,Function	`data:dblclick([Data], fn) 可传入data供函数fn处理; fn:在每一个匹配元素的dblclick事件中绑定的处理函数`

案例;dblclick事件;为操作按钮绑定处理函数

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//ready事件;
			$(function(){
				//绑定按钮双击事件;
				$("#btn_ID").dblclick(function(){
					alert(this);
				});
			});
		</script>
	</head>
	<body>
		<input type="button"  value="操作按钮" id="btn_ID"/>
	</body>
</html>

双击按钮,触发函数;

在这里插入图片描述

bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数。

参数	类型	注释
type,[data],function(eventObject)	String,Object,Function	`type: 含有一个或多个事件类型的字符串，由空格分隔多个事件`。比如"click"或"submit"，还可以是自定义事件名。data:作为event.data属性值传递给事件对象的额外数据对象; `fn:绑定到每个匹配元素的事件上面的处理函数
type,[data],false	String,Object,bool	false: 将第三个参数设置为false会使默认的动作失效。
events	String	一个或多个事件类型的字符串和函数的数据映射来执行。

案例: 用bind事件处理为按钮的单击事件绑定事件;

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//ready事件;
			$(function(){
				//用bind事件处理 为按钮的单击事件绑定事件
				$("#btn_ID").bind("click",function(){
					//单击得到此按钮的DOM对象;
					alert(this);
				});
			});
		</script>
	</head>
	<body>
		<input type="button"  value="操作按钮" id="btn_ID"/>
	</body>
</html>

单击按钮:触发函数;

在这里插入图片描述

unbind(type,[data|fn]]) bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

如果没有参数，则删除所有绑定的事件。
可以将使用bind()注册的自定义事件取消绑定。
如果提供了事件类型作为参数，则只删除该类型的绑定事件。
如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

参数	类型	注释
type,[fn]	String,Function	type:删除元素的一个或多个事件,由空格分隔多个事件值。fn:要从每个匹配元素的事件中反绑定的事件处理函数
type,false	String,bool	type:删除元素的一个或多个事件,由空格分隔多个事件值false:设置为false会使默认的动作失效。
eventObj	String	事件对象。这个 eventObj 参数来自事件绑定函数

案例:解除操作按钮的绑定事件;

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//ready事件;
			$(function(){
				//用bind事件处理 为按钮的单击事件绑定事件
				$("#btn_ID").bind("click",function(){
					//单击得到此按钮的DOM对象;
					alert(this);
				});
				//解除绑定事件;
				$("#btn_ID").unbind("click");
			});
		</script>
	</head>
	<body>
		<input type="button"  value="操作按钮" id="btn_ID"/>
	</body>
</html>

事件	注释
click([[data],fn])	单击元素时;触发每一个匹配元素的click事件;`这个函数会调用执行绑定到click事件的所有函数`
dblclick([[data],fn])	当双击元素时触发。`当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。在很短的时间内发生两次 click，即是一次双击 click 事件。提示：如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。`
bind(type,[data],fn)	为每个匹配元素的特定事件绑定事件处理函数。
unbind(type,[data`\|`fn]])	bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
blur([[data],fn])	当元素失去焦点时触发 ;`这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为;可以通过返回false来防止触发浏览器的默认行为;blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的`
change([[data],fn])	当元素的值发生改变时触发。`该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。`
error([[data],fn])	当元素遇到错误（没有正确载入）时触发. `这个函数会调用所有绑定到error事件上的函数，包括在对应元素上的浏览器默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。error事件通常可以在元素由于点击或者tab导航失去焦点时触发`
focus([[data],fn])	当元素获得焦点时触发. `可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数，注意，某些对象不支持focus方法`
focusin([data],fn)	当元素获得焦点时触发;`注意：focusin事件可以在父元素上检测子元素获取焦点的情况`
focusout([data],fn)	当元素失去焦点时触发;`注意: focusout事件在父元素上检测子元素失去焦点的情况`
keydown([[data],fn])	当键盘或按钮被按下时触发。`注意：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生`
keypress([[data],fn])	当键盘或按钮被按下时触发. `keypress事件与keydown事件类似,当按钮被按下时,会发生该事件.它发生在当前获得焦点的元素上,与 keydown事件不同,每插入一个字符,就会发生 keypress 事件。注释：如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生.`
keyup([[data],fn])	当按钮被松开时触发。发生在当前获得焦点的元素上.`注意：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生`
mousedown([[data],fn])	当鼠标指针移动到元素上方，并按下鼠标按键时触发。mousedown 与 click 事件不同，`mousedown 事件仅需要按键被按下，而不需要松开即可发生`
mouseenter([[data],fn])	当鼠标指针穿过元素时触发;该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同，`只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件`;如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
mouseleave([[data],fn])	当鼠标指针离开元素时触发。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同，`只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件`。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
mousemove([[data],fn])	当鼠标指针在指定的元素中移动时触发. mousemove事件处理函数会被传递一个变量——事件对象，其`.clientX 和 .clientY 属性代表鼠标的坐标`
mouseover([[data],fn])	当鼠标指针位于元素上方时触发。该事件大多数时候会与 mouseout 事件一起使用。注意：与 mouseenter 事件不同，`不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件`。
mouseup([[data],fn])	当在元素上放松鼠标按钮时触发。与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。
resize([[data],fn])	当调整浏览器窗口的大小时触发
scroll([[data],fn])	当用户滚动指定的元素时触发。scroll 事件`适用于所有可滚动的元素和 window 对象（浏览器窗口）`
select([[data],fn])	当 textarea 或文本类型的 input 元素中的文本被选择时触发。这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。`可通过在某个绑定的函数中返回false来防止触发浏览器的默认行为`
submit([[data],fn])	当提交表单时触发;该事件`只适用于表单元素`。
unload([[data],fn])	当用户离开页面时触发。

合成事件

hover([over,]out)
注释:一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。

参数	类型	注释
over,out	Function,Function	over:鼠标移到元素上要触发的函数 ; out:鼠标移出元素要触发的函数
out	Object	当鼠标移到元素上或移出元素时触发执行的事件函数

语法:

 $(“选择器").hover( fn1,fn2);

案例:定义一段蓝色的字体段落;当鼠标移入段落时,就显示为红色;当鼠标移出时,段落文字显示为绿色;

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//ready事件;
			$(function(){
				//定义hover方法切换事件;
				$("p").hover(function(){
					//当鼠标移动到 p标签 上时;显示为红色;
					$(this).css("color","red");
				},function(){
					//当鼠标移出 p标签时;显示绿色;
					$(this).css("color","green");
				});
			});
		</script>
	</head>
	<body>
		<!-- 定义蓝色的段落p标签 -->
		<p style="color: blue;">这是一个段落</p>
	</body>
</html>

效果:

在这里插入图片描述

toggle([speed],[easing],[fn])
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

参数	类型	注释
fn,fn2,[fn3,fn4,…]	Function,…	fn:第一数次点击时要执行的函数。fn2:第二数次点击时要执行的函数。fn3,fn4,…:更多次点击时要执行的函数。
[speed] ,[fn]	String,Function	`speed: 隐藏/显示效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast "`fn:在动画完成时执行的函数，每个元素执行一次。
[speed], [easing ], [fn ]	String,String,Function	easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
switch	Boolean	用于确定显示/隐藏的开关。如：true - 显示元素，false - 隐藏元素

案例:使用toggle方法实现点击切换文本三种不同的颜色,且轮流执行;

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//ready事件;
			$(function(){
				//为操作按钮定义toggle方法;
				$("#btn_ID").toggle(
				function(){
					//单击按钮时触发第一个函数;div文本变为红色;
					$("div").css("background-color","red");
				},function(){
					//单击按钮时触发第二个函数;div文本变为绿色;
					$("div").css("background-color","green");
				},function(){
					//单击按钮时触发第三个函数;div文本变为紫色;
					$("div").css("background-color","#FF00FF");
				});
			});
		</script>
	</head>
	<body>
		<div style="background-color: cadetblue;">
			toggle方法;不但可以绑定多个处理函数;还可以实现切换隐藏和显示;
		</div>
		<input type="button" value="操作按钮" id="btn_ID" />
	</body>
</html>

当点击三次操作按钮后,再次点击,又回到第一次点击触发的函数;变为红色;

在这里插入图片描述

案例:使用toggle方法实现显示与隐藏文本;

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div{
				//设置行级div标签的属性;
				width: 100px;
				height: 100px;
			}
		</style>
		<script type="text/javascript">
			//ready事件;
			$(function(){
			//操作显示到隐藏切换的函数;
			$("#btn").click(function(){
				//操作div标签;5秒后触发;
				$("div").toggle(5000);
			});
			});
		</script>
	</head>
	<body>
		<div style="background-color: #BBFFAA;">显示的一段文本</div>
		<!--使用hidden属性,使得该标签内容隐藏-->
		<div hidden="hidden" style="background-color: crimson;">隐藏的一段文本</div>
		
		<input type="button" value="操作显示到隐藏之间切换" id="btn"/>
	</body>
</html>

效果:点击按钮时;显示的文本块逐渐消失;隐藏的文本块逐渐显示;

在这里插入图片描述

其他常用事件

live(type, [data], fn)

jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行.

事件委托
.live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。

附加说明
.live() 虽然很有用，但由于其特殊的实现方式，所以不能简单的在任何情况下替换 .bind()。主要的不同有：
(1)在jQuery 1.4中，.live()方法支持自定义事件，也支持所有的 JavaScript 事件。在jQuery 1.4.1中，甚至也支持 focus 和 blue 事件了（映射到更合适，并且可以冒泡的focusin和focusout上）。另外，在jQuery 1.4.1中，也能支持hover（映射到"mouseenter mouseleave"）。然而在jQuery 1.3.x中，只支持支持的JavaScript事件和自定义事件：click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.
(2).live() 并不完全支持通过DOM遍历的方法找到的元素。取而代之的是，应当总是在一个选择器后面直接使用 .live() 方法
(3)当一个事件处理函数用 .live() 绑定后，要停止执行其他的事件处理函数，那么这个函数必须返回 false。仅仅调用 .stopPropagation() 无法实现这个目的。

案例:在点击按钮时;在div标签中生成新的按钮,点击生成的按钮,也会生成新的按钮;

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--部署jQuery-->
	    <script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//live方法 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
			
			//ready事件;
			$(function(){
				//使用live方法;事件委托;
				$("input").live("click",function(){
					//在div标签中追加生成按钮
					$("div").append("<input type='button' value='生成按钮' />");
				});
			});
		</script>
	</head>
	<body>
		<div style=" height: 100px; background-color: chartreuse;">文本</div>
		<input type="button" value="操作按钮" />
	</body>
</html>

效果:

在这里插入图片描述

one (type,[data],fn ) 一次性事件

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。
多数情况下，可以把事件处理函数定义为匿名函数。在不可能定义匿名函数的情况下，可以传递一个可选的数据对象作为第二个参数（而事件处理函数则作为第三个参数）.

案例:用one()一次性事件处理;绑定点击事件,使用处理函数在段落p标签中追加文本;

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//ready事件;
			$(function(){
				//one()一次性事件;仅触发一次;
				$("input").one("click",function(){
					//在p标签中追加字符串;
					$("p").append("文本");
				});
			});
		</script>
	</head>
	<body>
		<p>文本</p>
		<input type="button" value="操作按钮"  />
	</body>
</html>

点击第一次时,追加字符串成功;之后再点击按钮,不再追加;

在这里插入图片描述

resize([[data],fn])
当调整浏览器窗口的大小时，发生 resize 事件。

案例:当浏览器大小发生变变化,控制台会输出一段字符;

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			    //resize() 监听浏览器大小的变化;
				$(window).resize(function(){
					console.log("浏览器大小发生变化");
				});
			</script>
	</head>
	<body>
	</body>
</html>