jquery on 与 bind 事件绑定区别

最新推荐文章于 2024-07-05 15:50:42 发布

五笔小哥

最新推荐文章于 2024-07-05 15:50:42 发布

阅读量331

点赞数

CC 4.0 BY-SA版权

分类专栏：代码知识文章标签： jquery on与bind区别 on bind事件绑定事件绑定

本文链接：https://blog.youkuaiyun.com/qq_43344133/article/details/90341244

代码知识专栏收录该内容

42 篇文章

订阅专栏

博客主要介绍了jQuery中on与bind事件绑定的区别。语法上，on()和bind()各有特点。区别在于on()比bind()多了selector参数，该参数可用于事件委托，能避免子元素过多时影响性能，还可让动态增加的元素绑定指定事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery on 与 bind 事件绑定区别

语法说明：

on()
```
.on(events [,selector][,data],handler)
```
bind()
```
.bind(events [,eventsData],handler)
```

区别说明：

on() 比 bind() 多了一个参数： selector
selector 参数存在意义：事件冒泡进行事件委托
1. 子元素过多，给每个子元素增加一个事件，会影响性能；
2. 动态增加的元素也能绑上指定的事件；

事例展示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>on 与 bind 事件绑定区别</title>
	<script src="./js/jquery.min.js"></script>
</head>
<style>
	.contain{
		width:300px;
		height:500px;
		margin:100px auto;
	}
	.contain ul{}
	.contain ul li{
		width:100%;
		height:35px;
		margin-bottom:15px;
		list-style: none;
	}
	.contain ul li button{
		cursor: pointer;
	}
</style>
<body>
	<div class="contain">
		<ul id="BtnBind">
			<li><button type="button">绑定bind方法1</button></li>
			<li><button type="button">绑定bind方法2</button></li>
		</ul>
		<hr>
		<ul id="BtnOn">
			<li><button type="button">绑定on方法1</button></li>
			<li><button type="button">绑定on方法2</button></li>
		</ul>
	</div>

	<script>
		$(function(){
			//使用bind, 下面动态加载的不能绑定上点击事件
			$('#BtnBind > li > button').bind('click',function(){
				alert($(this).text());
			});

			//使用on, 下面动态加载的可以绑定上点击事件
			$('#BtnOn').on('click','li > button',function(){
				alert($(this).text());
			});

			var timer = setTimeout(function(){
				$('#BtnBind').append('<li><button type="button">绑定bind方法3 点击无效果</button></li>');
				$('#BtnOn').append('<li><button type="button">绑定on方法3 点击有效果</button></li>');
				clearTimeout(timer);
			},3000);

		});
	</script>
</body>
</html>

好的记性也需要不断的练习！！！