jquery-210812-03---jquery绑定事件

最新推荐文章于 2022-01-23 13:28:22 发布

原创最新推荐文章于 2022-01-23 13:28:22 发布 · 282 阅读

0 ·

CC 4.0 BY-SA版权

白光一

文章标签：

#jquery

jquery 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了jQuery中两种事件绑定方式：一种是直接通过事件名称进行绑定，如`$(选择器).事件名称(处理函数)`；另一种是使用`on()`方法进行绑定，支持动态添加元素的事件处理。示例代码分别演示了如何使用这两种方法为按钮和动态生成的按钮绑定点击事件，展示了解析和处理页面事件的灵活性。

事件介绍

为页面元素绑定事件，即对于指定页面元素，当某个事件发生后，执行指定动作

绑定事件01 —> $(选择器).监听事件名称(处理函数);

语法： 
	--->  $(选择器).监听事件名称(处理函数);
	$(选择器)：定位dom对象，dom对象可以有多个
	监听事件名称：是 js 事件中去掉 on 后的内容


说明：监听事件名称是 js 事件中去掉 on 后的内容， js 中的 onclick 的监听事件名称是 click
例如：
    为页面中所有的 button 绑定 onclick,并关联处理函数 fun1
    $("button").click(fun1)
    为页面中所有的 tr 标签绑定 onmouseover，并关联处理函数 fun2
    $("tr").mouseover(fun2)

绑定事件02 —> on()绑定事件

on() 方法在被选元素上添加事件处理程序。该方法给 API 带来很多便利，推荐使用该方法
	语法：
		$(选择器).on(event,,data,function)
		
event：事件名称（就是js中去掉on的部分，js中是onclick，在这里为click），
	   事件一个或者多个，多个之间空格分开。
data：可选。规定传递到函数的额外数据，json 格式
function: 可选。规定当事件发生时运行的函数

演示-绑定事件01 —> $(选择器).监听事件名称(处理函数);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件监听</title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn").click(function(){
					alert("jquery绑定了按钮事件")
				})
			})
		</script>
	</head>
	<body>
		<input type="button" id="btn" value="点我" />
	</body>
</html>

演示-绑定事件02 —> on()绑定事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>on()绑定事件</title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<style>
			#div01{
				width: 300px;
				height: 100px;
				background: gray;
			}
		</style>
		<script type="text/javascript">
			
			$(function(){
				
				$("#btn").click(function(){
					$("#div01").append("<input type='button' id='newBtn' value='新按钮'/>");
					
					$("#newBtn").on("click",function(){
						alert("新按钮被点击了");
					})
				})
			})
			
		</script>
	</head>
	<body>
		<div id="div01">
			<span>div01</span><br/>
		</div>
		<br/>
		<br/>
		<br/>
		<input type="button"  id="btn" value="在div01中创建一个新按钮"/>
		<br/>
	</body>
</html>