前端——事件委托

最新推荐文章于 2025-03-26 14:29:50 发布

五月天差一天

最新推荐文章于 2025-03-26 14:29:50 发布

阅读量282

点赞数

分类专栏： jquery js 文章标签： javascript jquery

本文链接：https://blog.youkuaiyun.com/s707365172/article/details/115672923

版权

jquery 同时被 2 个专栏收录

9 篇文章

订阅专栏

7 篇文章

订阅专栏

本文介绍了在前端Todolist案例中，如何使用事件委托来解决代码冗余和提高效率。通过对比传统方法，展示了事件委托在处理动态添加元素时的优势，减少了代码行数并提升了性能。同时，文中提到了在实现Todolist功能时遇到的错误，如length判断的正确写法，以及val()方法的使用。作者还表达了对防止Todolist内容重复的需求，期望在未来的学习中找到解决方案。

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

前端——事件委托

在今天的事件委托实际应用案例的学习当中，遇到了一些小问题，在这里分享一下。

Todolist案例-不用事件委托来做

根据教学视频首先不用事件委托的思想来完成Todolist,下面是js部分的全代码。

$(function(){

	var $txt1 = $('#txt1');
	var $btn1 = $('#btn1');
	var $list = $('#list');
	
	$btn1.click(function(){
		if ($txt1.val()=="") {
			alert("请输入目标");
			return;
		}
		var $li = $('<li><span>'+$txt1.val()+'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');
		$list.append($li);
		$txt1.val("");
		$list.find('.del').click(function(){
			$(this).parent().remove();
		});
		
		$list.find('.up').click(function(){
			if ($(this).parent().prev().length==0){
				alert('到顶了！');
				return;
			}
			$(this).parent().insertBefore($(this).parent().prev());
		});
		
		$list.find('.down').click(function(){
			if ($(this).parent().next().length==0) {
				alert('到底了！');
				return;
			}
			$(this).parent().insertAfter($(this).parent().next());
		});

	});
   //**************************************************************************
	$list.find('.del').click(function(){
		$(this).parent().remove();
	});

	$list.find('.up').click(function(){
		if ($(this).parent().prev().length==0) {
			alert('到顶了！');
			return;
		}
		$(this).parent().insertBefore($(this).parent().prev());
	});

	$list.find('.down').click(function(){
		if ($(this).parent().next().length==0) {
			alert('到底了！');
			return;
		}
		$(this).parent().insertAfter($(this).parent().next());
	});
})

在※号分界线那里可以感觉上下代码冗余，因为对于Todolist开始就有多个任务在内，所以不能把对删除和上下箭头的click绑定放在对btn1的click()的function()中，但由于程序的执行顺序，当程序一运行，※号分界线下的三个click绑定就会运行，那么这三个click中的函数功能对新加入Todolist中的内容就不会生效，因为在加入之前就已经绑定好了。怎么解决呢？只能在btn1的click函数绑定中重新对新加入的元素进行绑定，所以就看到了※号分界线上面的和下面代码一样的冗余代码，看着都难受。
所以用事件委托的思想，通过delegate()的方法再来做一遍，以加深印象。

Todolist案例-用事件委托来做

下面是用了事件委托的方法的全部js代码。

$(function(){
	var $txt1 = $('#txt1');
	var $btn1 = $('#btn1');
	var $list = $('#list');
	$txt1.focus();
	
	$btn1.click(function(){
		if ($txt1.val()=="") {
			alert("请输入内容");
			return;
		}
		var $li = $('<li><span>'+$txt1.val()+'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>')
		$li.appendTo($(list));
		$txt1.val("");
	})

	$list.delegate('a','click',function(){
		var $classval = $(this).prop('class');
		if ($classval=='up') {
			if ($(this).parent().prev().length==0) {
				alert("到顶了！")
				return;
			}
			$(this).parent().insertBefore($(this).parent().prev());
		}
		if ($classval=='down') {
			if ($(this).parent().next().length==0) {
				alert("到底了！")
				return;
			}
			$(this).parent().insertAfter($(this).parent().next());
		}
		if ($classval=='del') {
			$(this).parent().remove();
		}
	})
})

代码相比下来少了五十多行，大大加快了效率，同时也为之后添加新内容省了不少事。

遇到的问题

在看完教学视频后自己做的过程中，几个出错的地方。

用length判断长度的时候写成了length()==0，正确的写法应该是：

if ($(this).parent().next().length==0) {
	alert('到底了！');
	return;
}

将val()判断内容是否为空，和将val()内容设置成空两者搞混了，正确的写法应该是：

//将内容设置为空
$txt1.val("");
//判断内容是否为空
if ($txt1.val()=="") {
	alert("请输入目标");
	return;
};

同时在看视频的同时有个想法没实现，如何在Todolist有内容的情况下让输入的内容不能重复，想实现这个功能，一直没想出来，希望在日后的学习中能够完成这一功能，也希望看到的大佬能指点指点，今天的分享先到这。