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

jquery-210812-03—jquery绑定事件

• 事件介绍
• 绑定事件01 —> $(选择器).监听事件名称(处理函数);
• 绑定事件02 —> on()绑定事件
• 演示-绑定事件01 —> $(选择器).监听事件名称(处理函数);
• 演示-绑定事件02 —> 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>