jquery on()有几个参数

青灯夜游原创: 2022-04-21 11:29:151589浏览

on()方法有4个参数：1、第一个参数不可省略，规定要从被选元素添加的一个或多个事件或命名空间；2、第二个参数可省略，规定元素的事件处理程序；3、第三个参数可省略，规定传递到函数的额外数据；4、第四个参数可省略，规定当事件发生时运行的函数。

jquery on()有几个参数

本教程操作环境：windows7系统、jquery1.10.2版本、Dell G3电脑。

jquery on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

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

注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

jquery on() 方法可接受4个参数

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

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

示例1：向 e388a4556c0f65e1904146cc1a846bee 元素添加 click 事件处理程序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("p").on("click", function() {
					alert("段落被点击了。");
				});
			});
		</script>
	</head>
	<body>

		<p>点击这个段落。</p>

	</body>
</html>

示例2：添加多个事件处理程序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function(){
		  $("p").on("mouseover mouseout",function(){
		    $("p").toggleClass("intro");
		  });
		});
		</script>
		<style type="text/css">
			.intro {
				font-size: 150%;
				color: red;
			}
		</style>
	</head>
	<body>

		<p>将鼠标指针移到这段文字上。</p>

	</body>
</html>

示例3：向未来的元素添加事件处理程序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("div").on("click", "p", function() {
					$(this).slideToggle();
				});
				$("button").click(function() {
					$("<p>这是一个新段落。</p>").insertAfter("button");
				});
			});
		</script>
	</head>
	<body>

		<div style="background-color:yellow">
			<p>这是一段。</p>
			<p>单击任意p元素使其消失。包括本段。</p>
			<button>在此按钮后插入一个新的p元素</button>
		</div>

	</body>
</html>

【推荐学习：jQuery视频教程、web前端视频】

以上是jquery on()有几个参数的详细内容。更多信息请关注PHP中文网其他相关文章！

jquery 命名空间 Delegate Event function 事件选择器

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：React是双向数据流吗下一篇：react的key有什么用

查看更多