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

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

先看一段例子：

<!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

前端-【学习心得】-事件委托方法相关推荐

html表单的课后心得体会,web前端学习心得体会范文
<web前端学习心得体会范文>由会员分享,可在线阅读,更多相关<web前端学习心得体会范文(2页珍藏版)>请在装配图网上搜索. 1.web前端学习心得体会范文web前端学习心得 ...
总结一年来的前端学习心得
到今天,前端学习刚好满一年.我也顺利从非计算机专业转到前端.对于前端学习,自己也是摸着石头过河,中间也有过困惑和迷茫.本文主要讲述自己一年来对于前端学习的心得体会,希望能对学习前端的人提供一些帮助. ...
2018年前端学习心得——总结篇
学习 2018年,确定了人生的职业规划,开启了前端之路.基础不存在的,本科所了解的HTML标签和简单CSS样式早就不存在了.下面简单总结一下这一年的收获与进步. 自我学习(3个月):前端基础知识,在图 ...
前端学习 FormData 对象的方法
1. 常用的FormData对象方法获取表单对象中属性的值 formData.get('key'); 设置表单对象中属性的值 formData.set('key', 'value'); 删除表单对象 ...
[学习心得]Response.Write()方法响应导致页面字体变大的解决方法
我们来分析一下ASP.NET中用Response.Write()方法响应导致页面字体变大的问题比方说在页面里面有个LinkButton,要点击以后要打开新窗口,而且新窗口的URL是根据用户选择结果动 ...
事件委托的概念和原理
事件委托优点减少DOM操作的,减少浏览器的重绘(repaint)和重排(reflow),从而提高性能: 减少内存空间的占用率,因为每一个函数都是一个对象,对象越多,内存占有率就越大,自然性能就越差, ...
JQ 为未来元素添加事件处理器—事件委托
随着DOM结构的复杂化和Ajax等动态脚本技术的运用,有了较多的动态添加进来的元素,直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到,在这里就需要用到事件委托方法,JQ为事件委托提供 ...
13前端学习之WebAPI(三):节点操作、事件高级、DOM事件流、事件委托冒泡
文章目录一.节点操作: 1. 删除节点: 1.2. 案例:删除留言 2. 赋值(克隆)节点: 3. 案例:动态生成表格: 3.1 案例分析: 3.2 实现: 4. 创建元素的三种方式: 4.1 区别 ...
前端和后端的英文_80后老阿姨转行做前端的学习心得，深情交流！
一.Why choose front-end 2012.07毕业后,进了一家游戏公司做运营策划,写过营销方案.做过内容编辑.知道广告投放和换量,还得兼职产品经理画原型. 每天9.30-23.00以后, ...

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

前端-【学习心得】-事件委托方法相关推荐

最新文章

热门文章