前端-【学习心得】-事件委托方法

最新推荐文章于 2025-09-07 21:17:08 发布

转载最新推荐文章于 2025-09-07 21:17:08 发布 · 64 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wq123/p/4396425.html

文章标签：

#前端 #javascript #ViewUI

本文通过一个实例介绍了事件委托的概念及其在提高前端开发效率上的应用。利用事件冒泡原理，在较高层级的元素上设置事件监听器，当子元素被点击时，事件会向上冒泡并触发监听器，从而避免为大量子元素单独设置监听器导致的性能问题。

上篇分享提出的这个事件委托，今天让我来详细说明下把。

先看一段例子：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> </head> <body> <div class="tab" >     <ul class="wrapper" >     	<li class="detail">1</li>     	<li class="detail">2</li>     	<li class="detail">3</li>     	<li class="detail">4</li>     	<li class="detail">5</li>     	<li class="detail">6</li>     	<li class="detail">7</li>     	<li class="detail">8</li>     	<li class="detail">9</li>     	<li class="detail">10</li>     </ul>    </div>     <script type="text/javascript">     	$("document").ready(function(){     		/**事件委托**/     		$(".wrapper").on("click",function(e){     			console.log(e.target);     			console.log(e.target.nodeName);     			if(e.target.nodeName=="LI"){     				alert("ok")     			}     		})     		/**普通监听**/     		$(".detail").on("click",function(e){     			console.log(e);     		})     	})
    </script> </body> </html>

这里我给出了一个无序列表，我们想在点击li后输出一个内容。

对于我们大部分新手来说可能就直接在li上做事件注册。但是假如这个li有成千上万个的话，那个效率可想而知。

那么解决办法就是利用上篇说的事件冒泡。在li最外层的ul上增加事件监听。因为点击内部li后就会事件会冒泡到最外层。

而我们要做的就是判断下这个事件的目标对象是哪个。

我这里采用了判断节点的方法，当然同学们也可以定义好类名，用jq的hasClass();方法判断目标对象。这样一来我们的事件效率就会很高了。

转载于:https://www.cnblogs.com/wq123/p/4396425.html