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

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style type="text/css">

    .item{

        width:100px;

        height:100px;

        background:#1ABC9C;

    }

    </style>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

</head>

<body>

    <div>

        <ul>

            <li class="item">

                <div class="title">

                    今天天气不错

                </div>

                <p class="desc">xxxxxxs</p>

            </li>

            <li class="item">2</li>

            <li class="item">3</li>

            <li class="item">4</li>

        </ul>

    </div>

<script type="text/javascript">

    $(function(){

　　

        var lio = "<li class='item'>5</li>";

        $("ul").append(lio);

        $("li.item").click(function(){
        　　/*动态生成的li5 是不会执行点击事件*/
        })

    })

</script>

</body>

</html>

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

$(function(){

        $("div > ul").on("click",function(event){

            var e = event.target;

            /*事件委托*/

            if( e.className == "item"){

                alert("li.item");

            }

        });

        var lio = "<li class='item'>5</li>";

        $("ul").append(lio);

    })

在上面解决的方案中,并不是直接给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. angularjs中的绑定策略“@”，“=”，“&”实例

    <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...

  2. 图的建立——邻接表表示（C语言+VC6.0平台）

    图是一种重要而且相对复杂的数据结构,在实际编程中非常有用.邻接表是图的主要表示形式之一,是一种链接表表示方法. #include<stdio.h> #include<stdlib.h ...

  3. jdk-map-hashMap

    关于java中的HashMap,我们在项目中经常使用到,但是我们的场景是否使用对了呢? 下面分为四个部分来阐述我的HashMap的理解 1.为什么要使用hashMap? 在项目中,需求的实现需要使用到 ...

  4. Swift—析构函数-备

    与构造过程相反,实例最后释放的时候,需要清除一些资源,这个过程就是析构过程.在析构过程中也会调用一种特殊的方法deinit,称为析构函数.析构函数deinit没有返回值,也没有参数,也不需要参数的小括 ...

  5. 转：单片机C语言中的data,idata,xdata,pdata,code

    从数据存储类型来说,8051系列有片内.片外程序存储器,片内.片外数据存储器,片内程序存储器还分直接寻址区和间接寻址类型,分别对应code.data.xdata.idata以及根据51系列特点而设定的 ...

  6. 转：DDR3详解（以Micron MT41J128M8 1Gb DDR3 SDRAM为例）之一

    转载来自:http://blog.csdn.net/shanghaiqianlun/article/details/6976804 作者:shanghaiqianlun的专栏 1．结构框图: 2．管脚 ...

  7. Angularjs Scope 原型链

    我们知道scope是可以继承的.scope的继承和js原型链是同一个概念. <div ng-controller="parentCtrl"> {{name}} < ...

  8. Sum square difference

    简单: e sum of the squares of the first ten natural numbers is, 12 + 22 + ... + 102 = 385 The square o ...

  9. [LeetCode 119] - 杨辉三角形II(Pascal's Triangle II)

    问题 给出一个索引k,返回杨辉三角形的第k行. 例如,给出k = 3,返回[1, 3, 3, 1] 注意: 你可以优化你的算法使之只使用O(k)的额外空间吗? 初始思路 首先来复习复习杨辉三角形的性质 ...

  10. 用TMS的控件就可以了，有bug叫他们改

    [深圳]大宝delphi本身不是太隐定.不建议弄太多自己的东西.还要debug好长时间.为了快.便不去弄控件了够用了.真的.都不用花太多时间去弄这弄那.有bug叫他们改便可以.