jQuery绑定事件处理器

最新推荐文章于 2024-05-21 23:21:19 发布

糖糖糖果88

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量748

点赞数 26

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

本文链接：https://blog.csdn.net/m0_59329828/article/details/135741807

版权

jQuery 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

绑定事件处理器

1、.bind（）

绑定一个事件

为元素绑定一个事件处理程序，也就是说给元素添加一个事件，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jQuery.js"></script>
	</head>
	<body>		
		<button id="btn">按钮</button>
	</body>
	<script>
	$(function(){
			// bind(事件类型,处理函数,布尔类型） 第三个参数可省略
			// False是阻止冒泡事件，
			// true为默认事件，也就是冒泡事件，也就是浏览器会有一个自动
			// 的事件处理，比如有一个a链接，点击就会跳转）
		$("#btn").bind("click",function(){
			alert("啊啊啊");
		});
	})
	// bind 这个方法已经不使用了，追加的是on（）方法。
    //是将事件处理程序绑定到document的首选方法
	</script>
</html>

绑定两个事件

还可以同时绑定两个事件，是互相不会覆盖的，

   $("#btn").bind("click mouseover",function(){
           alert("啊啊啊");
       });
   })

绑定不同事件，显示不同内容

   $(function(){
       $("#btn").bind({
           click:function(){
           alert("click");
       } ,
           mouseover:function(){
               alert("mouseover");
           }
       })
   })

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jQuery.js"></script>
		<style>
			p{
				width: 100px;
				height: 50px;
				background-color: darkcyan;
				border-radius: 5px;
				text-align: center;
				line-height: 50px;  /* 垂直居中 */
				margin: 0 auto;  /* 居于浏览器中间 上下为0，左右自动*/
				color: #ffffff;
				font-size: 20px; /* 字体大小 */
			}
			.pbtn{
				background-color: red;
			}
		</style>
	</head>
	<body>		
		<p>按钮</p>
	</body>
	<script>
		$(function(){
			$("p").bind({
				mouseover:function(){
					$(this).addClass("pbtn");
				},
				mouseout:function(){
					$(this).removeClass("pbtn");
				}
			})
		})
	</script>
</html>

toggleClass（）简化

利用toggleClass（）简化，同等效果

           $("p").bind("mouseover mouseout",function(){
               // toggleClass("pbtn")如果有这个类名就去掉，没有就增加
               $(this).toggleClass("pbtn")
           })

2、.delegate（）

事件委托

参数有三个（选择器，事件类型，处理函数）

常用为ul和li标签组合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jQuery.js"></script>
	</head>
	<body>		
	<ul>
		<li>li 1</li>
		<li>li 2</li>
		<li>li 3</li>
		<li>li 4</li>
	</ul>
	</body>
	<script>
	$(function(){
		$("ul").delegate("li","click",function(){
			alert($(this).html());
		})
	})
	</script>
</html>

3、.off（）移除

       var fn=function(){
           alert("hahah");
       }
       $("div").on("click mouseover","p",fn);
       $("div").off();

会发现，on事件绑定的效果被移除掉了。

4、.on（）添加

bind（）和delegate（）都可以用on（）事件来代替

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jQuery.js"></script>
	</head>
	<body>		
	<button id ="btn">button</button>
	<ul>
		<li>li 1</li>
		<li>li 2</li>
		<li>li 3</li>
		<li>li 4</li>
	</ul>
	</body>
	<script>
	$(function(){
		// $("ul").delegate("li","click",function(){
		// 	alert($(this).html());
		// })
		$("#btn").on("click",function(){
			alert("haha");
		});
		$("ul").on("click","li",function(){
			alert($(this).html());
		})
	})
	</script>
</html>

绑定多个事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jQuery.js"></script>
		<style>
			p{
				width: 100px;
				height: 60px;
				background-color: red;
			}
		</style>
	</head>
	<body>		
	<button id ="btn">button</button>
	<ul>
		<li>li 1</li>
		<li>li 2</li>
		<li>li 3</li>
		<li>li 4</li>
	</ul>
	<p>hahah</p>
	</body>
	<script>
	$(function(){
		// $("ul").delegate("li","click",function(){
		// 	alert($(this).html());
		// })
		$("#btn").on("click",function(){
			alert("haha");
		});
		$("ul").on("click","li",function(){
			alert($(this).html());
		});
		$("p").on("mouseover mouseout ",function(){
			alert("hahah");
		})
	})
	
	</script>
</html>

方法二

       var fn=function(){
           alert("hahah");
       }
       $("div").on("click mouseover","p",fn);

5、.one（）

为元素的事件添加处理函数，处理函数在那个元素上，那种事件类型，最多处理一次，常用作引导页，因为引导页只执行一次

	<script>
	$(function(){
		$("p").one("click",function(){
			alert("hahah");
		})
	})
	</script>

会发现，点击一次会有alert效果，再次点击则不会触发。

6、.unbind（）

为bind（）的移除事件，和off（）用法一样。

7、.undelegate（）

为delegate（）的移除事件，和off（）用法一样。