JQuery学习5（jQuery事件）

最新推荐文章于 2022-03-23 21:34:34 发布

herryone123

最新推荐文章于 2022-03-23 21:34:34 发布

阅读量231

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/kenjianqi1647/article/details/105366619

版权

Web前端专栏收录该内容

19 篇文章 2 订阅

订阅专栏

1、jQuery绑定事件

2、jQuery绑定方法

3、jQuery绑定一次事件

1、jQuery绑定事件

jQuery提供了四种事件绑定方式，bind()、live()、delegate()、on()。

该四种方法均是通过事件冒泡方式，bind()只针对已经存在的元素进行事件的设置，live、delegate、on可以为未来新添加元素注册事件。

1）bind()

语法：

bind（event,data,function）

event为元素事件，可以为一个或多个。
data为可选参数项，需要传递的参数。
function为事件发生时要执行的函数。

应用举例：

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">

	</style>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(
			function(){   //界面始化函数
				$(".btn-test").bind("click",function(){  //单个事件处理
					$(".container").slideToggle();//显示隐藏div
				});
				
				$(".btn-test").bind("mouseout click",function(){  //多个事件处理 采用空格相隔的方式
					$(".container").slideToggle();//显示隐藏div
				});
			}
		)
	</script>

</head>

<body>
	<input type="button" value="按钮" class="btn-test"/>
	<div class="container" ><img src="image/小兔子.jpg" height="200"/></div>

</body>

2）delegate()

delegate（）方法为指定的元素，以及被选元素的子元素，添加一个或多个事件处理程序。

delegate(childSelector,event,data,function)

childSelector指定需要注册事件的元素，一般为调用对象的子元素。
event:为添加元素的一个或多个事件。
data为需要传递的参数。
function执行函数。

应用举例：

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">

	</style>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(
			function(){   //界面始化函数
				$("ul").delegate("li","click",function(){  //单个事件处理
					alert(this.innerHTML);
				});
				var i=4;
				$("#btn").click(function(){
					$("ul").append("<li>列表项目"+ i++ +"</li>")
				})
			}
		)
	</script>

</head>

<body>
	<button id="btn">添加列表项目</button>
	<ul id="list">
		<li>列表项目1</li>
		<li>列表项目2</li>
		<li>列表项目3</li>
	</ul>
</body>

2、jQuery绑定方法

jquery提供24个快捷键方法为特定的事件类型绑定事件处理程序。

如bind（）方法绑定的事件可以用clink()方法绑定。

$("p").bind("click",function(){
    //事件处理函数
}
);

$("p").click(function(){
    //事件处理函数
}
);

3、jQuery绑定一次事件

one（）f方法用于绑定一次事件，由它绑定的事件在执行一次响应后就会失效。

语法格式：

one(event,[data],function)

event为事件类型
data需要传递的参数
function为需要执行的函数

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">

	</style>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(
			function(){   //界面始化函数
	
				$("#btn").one("click",function(){
					alert("响应一次事件");
				});
			}
		)
	</script>

</head>

<body>
	<button id="btn">按钮</button>

</body>

herryone123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery学习5（jQuery事件）

1、jQuery绑定事件jQuery提供了四种事件绑定方式，bind()、live()、delegate()、on()。该四种方法均是通过事件冒泡方式，bind()只针对已经存在的元素进行事件的设置，live、delegate、on可以为未来新添加元素注册事件。1）bind()语法：bind（event,data,function）event为元素事件，可以为一个或多个。...
复制链接

扫一扫