jQuery 中事件的绑定_jquery事件绑定正确的是-优快云博客

本文链接：https://blog.youkuaiyun.com/aimartt/article/details/7863503

本文介绍了jQuery中多种事件绑定的方法，包括使用bind()函数绑定单个和多个事件、简写事件绑定方法、hover()方法及toggle()方法的应用。通过示例展示了如何实现鼠标悬停时显示和隐藏内容的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery 中事件的绑定

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

1、使用 bind() 绑定事件
（1）分别绑定单个事件

<%@ 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() {
				//当鼠标滑到标题上时，显示内容。
				$("#head").bind("mouseover", function() {
					$("#content").removeClass();
				});
				//当鼠标离开标题时，隐藏内容。
				$("#head").bind("mouseout", function() {
					$("#content").addClass("content");
				});
			});
		</script>  	
		
		<!-- CSS -->
		<style type="text/css">
			#panel {width: 500px; border: 1px solid;}
			#head {background: yellow;}
			.content {display: none;}
		</style>
  	</head>
  
  	<!-- HTML -->
  	<body>
  		<div id="panel">
  			<div id="head">什么是黄襟蛱蝶？</div>
  			<div id="content" class="content">
  				（该内容来自维基百科）黄襟蛱蝶是蛱蝶科下的一种蝴蝶，主要分布在南亚和东南亚地区。
  				上半部为赭黄色。前翅有一些圆形的，细长的暗色印记，
  				一条宽且有点弯曲的横向黄色条纹从肋脉到第一翅脉，不过没有延伸到翅膀末端，
  				条纹的后端变宽，边缘不规则，朝里为黑色，在间隙3和间隙4突出，间隙2内凹，间隙1外凸。
  				黄色条纹上有3个呈弧状排列的黑色圆点，分别位于间隙1、2和3，最下方最大。
  			</div>
  		</div>
  	</body>
</html>

（2）使用链式操作绑定多个事件

<script type="text/javascript">
	$(function() {
		//当鼠标滑到标题上时，显示内容；当鼠标离开标题时，隐藏内容。
		$("#head").bind("mouseover", function() {
			$("#content").removeClass();
		}).bind("mouseout", function() {
			$("#content").addClass("content");
		});
	});
</script>

（3）一次性绑定多个事件

<script type="text/javascript">
	$(function() {
		//当鼠标滑到标题上时，显示内容；当鼠标离开标题时，隐藏内容。
		$("#head").bind("mouseover mouseout", function() {
			$("#content").toggleClass();
		});
	});
</script>

2、简写绑定事件
jQuery 为 click、mouseover 和 mouseout 这类经常用到的事件提供了一套简写的方法。如：

<script type="text/javascript">
	$(function() {
		//当鼠标滑到标题上时，显示内容。
		$("#head").mouseover(function() {
			$("#content").removeClass();
		});
		//当鼠标离开标题时，隐藏内容。
		$("#head").mouseout(function() {
			$("#content").addClass("content");
		});
	});
</script>

3、hover([over, ]out) 方法
（1） over, out 参数：当鼠标移动到一个匹配的元素上面时，会触发 over 函数。当鼠标移出这个元素时，会触发 out 函数。

<script type="text/javascript">
	$(function() {
		//当鼠标滑到标题上时，显示内容；当鼠标离开标题时，隐藏内容。
		$("#head").hover(function() {
			$("#content").removeClass();
		}, function() {
			$("#content").addClass("content");
		});
	});
</script>

（2） out 参数：当鼠标移到元素上或移出元素时都会触发 out 函数。

<script type="text/javascript">
	$(function() {
		//当鼠标滑到标题上时，显示内容；当鼠标离开标题时，隐藏内容。
		$("#head").hover(function() {
			$("#content").toggleClass();
		});
	});
</script>

4、toggle() 方法
fn,fn2,[fn3,fn4,...] 参数：
fn：第一数次点击时要执行的函数。
fn2：第二数次点击时要执行的函数。
fn3,fn4,...：更多次点击时要执行的函数。

<script type="text/javascript">
	$(function() {
		//当鼠标第一次点击标题时，显示内容；鼠标第二次点击标题时，隐藏内容。
		$("#head").toggle(function() {
			$("#content").removeClass();
		}, function() {
			$("#content").addClass("content");
		});
	});
</script>

toggle() 方法的其他使用方法请参考帮助文档。