jQuery--事件绑定（live()、delegate()、on()、hover()）详解

最新推荐文章于 2021-12-18 17:25:00 发布

吴声子夜歌

最新推荐文章于 2021-12-18 17:25:00 发布

阅读量835

点赞数 4

分类专栏： jQuery 文章标签： jQuery 事件绑定 on() delegate() hover()

本文链接：https://blog.csdn.net/cold___play/article/details/101903596

版权

jQuery 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

live()方法

使用bind()方式绑定事件时，只能针对页面中存在的元素进行绑定，而bind()绑定后新增的元素上没有事件响应。使用live()方法能够对页面所有匹配元素绑定事件，包含存在的元素和将来新增的元素，其语法格式如下：

live(types, fun)

types：表示事件类型，是一个或多个事件类型构成的字符串，类型之间由空格隔开
fn：表示所绑定的事件处理函数

示例：

$("div").live("click", function(){
	alert($(this).html());
});

delegate()方法：

delegate()方法可以在任何元素的基础上，对其内部符合条件的元素绑定事件处理函数，其语法格式如下：

delegate(childSelector,[types],[data],fn)

childSelector：一个小选择器字符串，用于筛选触发事件的元素
types：表示事件类型，是一个或多个事件类型构成的字符串，类型之间由空格隔开
data（可选）：表示传递的额外数据，在事件处理函数中通过event.data来获得所传入的额外数据
fn：表示所绑定的事件处理函数

示例：

<!doctype html>
<html>
  <head>
	<meta charset="utf-8">
	<title>jQuery基本操作事件绑定</title>
	<script type="text/javascript" src="js/jquery-1.x.js"> </script>
    <script type="text/javascript" src="js/jquery-migrate-1.2.1.js"> </script>
   	<style type="text/css">
		div{width:150px;height:100px;border:1px solid #666;}
		#leftDiv{background-color:#CCC; display:inline-block;}
		#rightDiv{ background-color:#999; display:inline-block;}
		button{margin-right:10px;}
	</style>
  </head>
  <body>
  	<span><button>div显示与隐藏</button></span><button>普通按钮</button><hr/>
  	<div id="leftDiv">已存在的Div</div>
	<script type="text/javascript">
		$(function(){
			//绑定事件
			$("div").live("click", function(){
				alert($(this).html());
			});
			//通过代码新增的Div
			$("body").append("<div id='rightDiv'>通过代码新增的Div</div>");
			//对span元素中button按钮绑定click事件处理
			$("span").delegate("button","click",function(){
				$("div").slideToggle();
			});
		});
	</script>
  </body>
</html>

在这里插入图片描述

on()方法：

在jQuery1.7+中新增了on()方法，用于绑定事件所需的处理函数，实现从低版本到高版本的转换，替代之前版本中的bind()、live()、和delegate()方法，其语法格式如下：

on(types,[childSelector],[data],fn)

childSelector：一个小选择器字符串，用于筛选触发事件的元素
types：表示事件类型，是一个或多个事件类型构成的字符串，类型之间由空格隔开
data（可选）：表示传递的额外数据，在事件处理函数中通过event.data来获得所传入的额外数据
fn：表示所绑定的事件处理函数

hover()方法：

hover()方法用于模拟鼠标悬停事件。当鼠标悬停在某元素上时触发第一个函数，素表移出时触发第二个函数，其语法格式如下：

hover(overFn,[outFn])

overFn：表示鼠标悬停时所触发的时间处理函数
outFn（可选）：表示鼠标移出时所触发的事件处理函数
当函数提供一个参数时，鼠标悬停和移出都会触发该事件处理函数

示例：on()和hover()方法绑定事件处理函数

<!doctype html>
<html>
  <head>
	<meta charset="utf-8">
	<title>jQuery基本操作事件绑定</title>
	<script type="text/javascript" src="js/jquery-1.x.js"> </script>
   	<style type="text/css">
		div{width:200px;height:200px;border:1px solid #666;}
		#leftDiv{float:left; margin:0 auto;}
		#rightDiv{float:right;}
	</style>
  </head>
  <body>
  	<div id="leftDiv">
    	<input type="button" value="bind事件绑定" id="bindBtn"/>
        <input type="button" value="事件传输数据" id="DataBindBtn"/>
    </div>
    <div id="rightDiv">右侧展示区</div>
	<script type="text/javascript">
		$(function(){
			//绑定事件（替代bind()方法）
			$("#leftDiv").on("click","#bindBtn", function(){
				alert("使用bind()方法绑定事件处理");
			});
			//事件绑定，并传递额外数据（替代delegate()方法）
			$("div").on("click","#DataBindBtn",{msg: "传递额外数据"},function(e){
				alert(e.data.msg);
			});
			//绑定事件（替代live()方法）
			$(document).on("click","div[id!=leftDiv]",function(){
				alert($(this).html());
			});
			//hover()绑定事件
			$("#rightDiv").hover(function(){
				var r=parseInt(Math.random()*255);
				var g=parseInt(Math.random()*255);
				var b=parseInt(Math.random()*255);
				var rgb="rgb("+r+","+g+","+b+")";
				$(this).css("background-color",rgb);
			},function(){
				$(this).css("background-color","white");
			});
		});
	</script>
  </body>
</html>

在这里插入图片描述

吴声子夜歌

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery--事件绑定（live()、delegate()、on()、hover()）详解

live()方法使用bind()方式绑定事件时，只能针对页面中存在的元素进行绑定，而bind()绑定后新增的元素上没有事件响应。使用live()方法能够对页面所有匹配元素绑定事件，包含存在的元素和将来新增的元素，其语法格式如下：live(types, fun)types：表示事件类型，是一个或多个事件类型构成的字符串，类型之间由空格隔开fn：表示所绑定的事件处理函数示例：$("d...
复制链接

扫一扫