jQuery事件绑定与解绑

最新推荐文章于 2024-07-08 16:22:29 发布

杪＆秋

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量489

点赞数 2

分类专栏： jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_51435825/article/details/128299814

版权

jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、事件绑定与解绑

1、click()-->单击事件（监听）

2、on()-->绑定事件

3、mouseenter()-->鼠标进入

4、mouseleave()-->鼠标离开

5、off()-->关闭事件

6、bind()-->绑定事件

7、event.stopPropagation()-->阻止冒泡

8、one()-->绑定事件(只能执行一次)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
			}
			.out{
				position: absolute;
				width: 200px;
				height: 200px;
				top: 20px;
				left: 10px;
				background-color: aqua;
			}
			.inner{
				position: absolute;
				width: 100px;
				height: 100px;
				top: 50px;
				background-color: red;
			}
			.out1{
				position: absolute;
				width: 200px;
				height: 200px;
				top: 300px;
				left: 10px;
				background-color: aqua;
			}
			.inner1{
				position: absolute;
				width: 100px;
				height: 100px;
				top: 50px;
				background-color: red;
			}
			.out2{
				position: absolute;
				width: 200px;
				height: 200px;
				top: 600px;
				left: 10px;
				background-color: aqua;
			}
			.inner2{
				position: absolute;
				width: 100px;
				height: 100px;
				top: 50px;
				background-color: red;
			}
		</style>
		<script src="js/jquery-1.7.2.min.js"></script>
		<script>
			$(function(){
				/* 监听 */
				$(".out").click(function(){
					alert("click")
				});
				/* 绑定*/
				$(".out").on("click",function(){
					alert("on")
				});
				$(".inner").mouseenter(function(){
					console.log("进入");
				});
				$(".inner").mouseleave(function(){
					console.log("离开");
				});
				/* 关闭事件 */
				$(".inner").off();
				/* 绑定  可以绑定多个事件 */
				$(".out1").bind("mouseenter",function(){
					console.log("进入");
				});
				/* 事件冒泡 */
				$("#btn").click(function(event){
					console.log("按钮点击");
					event.stopPropagation();//阻止冒泡
				});
				$(".divbtn").click(function(){
					console.log("div点击");
				});
				/* one 只能执行一次的函数 */
				$(".out2").one("click",function(){
					console.log("one事件");
				});
			});
		</script>
	</head>
	<body>
		<div class="out">
			外部div
			<div class="inner">
				内部div
			</div>
		</div>
		<div class="divbtn">
			<button id="btn">我是按钮</button>
		</div>
		<div class="out1">
			外部div1
			<div class="inner1">
				内部div1
			</div>
		</div>
		<div class="out2">
			外部div2
			<div class="inner2">
				内部div2
			</div>
		</div>
	</body>
</html>