JQ—绑定事件—bind和on的区别

最新推荐文章于 2023-08-01 19:31:16 发布

Poppy_LYT

最新推荐文章于 2023-08-01 19:31:16 发布

阅读量1k

点赞数

分类专栏： JQ 文章标签： JQ

本文链接：https://blog.csdn.net/Poppy_LYT/article/details/91984125

版权

JQ 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JQ—绑定事件—bind和on的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.4.1.min.js"></script>
		<style>
			ul li{
				height: 30px;
				border: 1px solid red;
				list-style: none;
				margin-bottom: 10px;
			}
		</style>
		<script src="js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul id="list">
			<li>111</li>
			<li>222</li>
			<li>333</li>
		</ul>
		<button id="btn">添加</button>
		<script>
			$(function () {
				var i = 3;
				var $li = '';
				
				// 动态添加li
				$('#btn').click(function () {
					i++;
					$li = '<li>'+i+i+i+'</li>';
					$('#list').append($li);
				})
				
				// on 可以动态绑定事件 要委托给父元素查找子元素进行绑定 删除用off
				// $('#list').on('click','li',function () {
				// 	console.log($(this).html());
				// })
				
				// bind 不可以动态绑定事件 删除用unbind
				// $('#list li').bind('click',function () {
				// 	console.log($(this).html());
				// })
				
				// on/bind都可以一次性绑定多个事件 但对于动态添加的元素没有作用
				$('#list li').on({
					'mouseover': function () {
						console.log('mouseover');
					},
					'mouseout': function () {
						console.log('mouseout');
					},
					'click': function () {
						console.log('click');
					}
				});
				
				// on/bind的删除如果括号内不填写参数全部删除,如果填写参数只删除事件名方法
			})
		</script>
	</body>
</html>