码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-04-06 20:08:18      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:

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

先看一段例子:

<!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();方法判断目标对象。这样一来我们的事件效率就会很高了。

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

标签:

原文地址:http://www.cnblogs.com/wq123/p/4396425.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!