事件委托一般用于动态生成的元素中使用,如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.     .item{
  8.         width:100px;
  9.         height:100px;
  10.         background:#1ABC9C;
  11.     }
  12.     </style>
  13.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  14. </head>
  15. <body>
  16.     <div>
  17.         <ul>
  18.             <li class="item">
  19.                 <div class="title">
  20.                     今天天气不错
  21.                 </div>
  22.                 <p class="desc">xxxxxxs</p>
  23.             </li>
  24.             <li class="item">2</li>
  25.             <li class="item">3</li>
  26.             <li class="item">4</li>
  27.  
  28.         </ul>
  29.     </div>
  30. <script type="text/javascript">
  31.     $(function(){
  32. 　　
  33.         var lio = "<li class='item'>5</li>";
  34.         $("ul").append(lio);
  35.  
  36.         $("li.item").click(function(){
            　　/*动态生成的li5 是不会执行点击事件*/
            })
  37.     })
  38.  
  39. </script>
  40. </body>
  41. </html>

解决这个问题我们就要利用事件捕捉的原理

  1. $(function(){
  2.         $("div > ul").on("click",function(event){
  3.             var e = event.target;
  4.             /*事件委托*/
  5.             if( e.className == "item"){
  6.                 alert("li.item");
  7.             }
  8.         });
  9.         var lio = "<li class='item'>5</li>";
  10.         $("ul").append(lio);
  11.  
  12.     })

在上面解决的方案中,并不是直接给li绑定事件,而是给所有的li父级元素绑定事件.根据事件扑捉的原理,事件会自上而下传递给li,

我们只需要通过一些简单的条件判断来确定我们的目标元素即可;

js-事件委托的更多相关文章

  1. JS事件委托学习（转）

    JS 事件委托就是利用冒泡原理,把事件加到父级上触发,执行效果. 好处: 1.提高性能 2.新添加的元素还会有之前的事件     <</</</</li></ ...

  2. JS事件委托的原理和应用

    js事件委托也叫事件代理,实际上事件委托就是通过事件冒泡实现的,所谓的事件就是onclick,onmouseover,ondown等等,那么委托呢?委托就是指本来这个事是要你自己做的,但是你却让别人帮 ...

  3. js事件委托 jQuery写法

    http://www.cnblogs.com/liugang-vip/p/5616484.html 不是抄的,这篇文章写的细 这是js 事件委托写法 <!DOCTYPE html> < ...

  4. 原生js事件委托（事件代理）方法扩展

    原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法 /** * 事件委托方法 * @param eventName {string}:事件名称,如'click' * @param ...

  5. js事件委托

    什么是事件委托:通俗的讲,onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也 ...

  6. 彻底弄懂JS事件委托的概念和作用

    一.写在前头    接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗?然后我就混乱了,我印象中这个方法是可以绑定新节点的 ...

  7. js事件委托篇(附js一般写法和js、jq事件委托写法)

    参考: jQuery代码优化:事件委托篇 使用该技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器被添加在他们的父元素上,事件监听器会分析从子元素上冒泡上来的事件,并找到是哪个子元素事件. ...

  8. js事件委托和jQuery事件绑定on , off , one , bind , unbind , die

    一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...

  9. js 事件委托 事件代理

    JavaScript高级程序设计上解释:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 通过例子类比: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三 ...

  10. js事件委托或事件代理

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

随机推荐

  1. C#中结构的使用

    //声明结构 结构与枚举区别,一个不用声明类型,一个要声明类型 public struct Person { //这里叫字段,做用也是存储内容,变量只可以存一个值,字段可以存多个值 //声明字段前最好 ...

  2. Ubuntu 安装之后的配置博文总结

    由于频繁地在各种机器上给别人安装ubuntu,每次安装之后都需要进行一些配置,现在以ubuntu12.04为例,就他人的一些配置博文总结如下: 1. Ubuntu安装中文输入法 http://www. ...

  3. 【Ecstore2.0】计划任务/队列/导入导出 的执行问题

    [环境]CENTOS6.3 + wdcp(php5.3) [症状]可正常加入队列,但不执行队列 [原因]大部份都是用户权限造成 [原理] Ecstore2.0的导入导出.发送邮件.日常清理备份等任务操 ...

  4. 第几天 AC 杭电

    第几天? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  5. 使用Statement执行sql语句

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; import java ...

  6. SpringMVC——从HelloWorld

    学习SpringMVC——从HelloWorld开始   前言: 时隔十二年,中国女排最终过关斩将,用3:1的成绩证明了自己的实力,霸气夺冠,为中国赢得了一枚意义非常的金牌.这是一次全民的狂欢,一场视 ...

  7. i++ 与 ++i 的从字节码层面看二者的区别

    /** * javap命令可以对class反汇编得到其字节码文件(此命令并不是jdk8开始的,只不过jdk8中对工具进行加强,增加了一些参数,可通过 javap -help了解) * * 注意: * ...

  8. d3可视化实战02：理解d3数据驱动的真正含义

    前文中已经提到,SVG从诞生之初起就可以非常方便地使用javascript脚本语言来进行其DOM对象的控制.当然,控制的方法有很多,有直接控制SVG对象的方法,例如使用原生js:有帮你封装一下图形接口 ...

  9. [LeetCode] 237. Delete Node in a Linked List 解题思路

    Write a function to delete a node (except the tail) in a singly linked list, given only access to th ...

  10. RHEL修改主机名和IP

    1,     修改主机名 vi /etc/sysconfig/network NETWORKING=yes HOSTNAME=NEWHOSTNAME       #修改该值作为主机名,如:NEWPC ...