JQuery 中的事件委托

定义

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新元素的子元素也可以拥有相同的操作。可以理解为生命一个全局标量，所有的子元素，都要执行我声明父元素的参数。

事件与事件委托代码对比

事件 <!DOCTYPE html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
        <script>
            $(function(){
                    $ali = $('#list li');
                    $ali.click(function() {
                            $(this).css({background:'red'});
                            });
                    })
        </script>    
    </head>
    <body>
        <ul id="list">
                <li>1</li>
                <li>2</li>
             <li>3</li>
             <li>4</li>
             <li>5</li>
        </ul>
    </body>
</html>

事件委托 <!DOCTYPE html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
        <script>
            $(function(){
                    $ali = $('#list');
                    $ali.delegate('li','click',function(){
                        $(this).css({background:'red'});
                    })
       })
        </script>    
    </head>
    <body>
        <ul id="list">
                <li>1</li>
                <li>2</li>
             <li>3</li>
             <li>4</li>
             <li>5</li>
        </ul>
    </body>
</html>

易错点

事件委托，用delegate（委托）词；由于事件委托 都是子元素委托给了父元素，因此声明的是父级元素，不许要声明子元素；

JQuery中的事件委托的更多相关文章

  1. JavaScript(jQuery)中的事件委托

    一:什么是事件委托? 事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件. 二:为什么要用事件委托? 1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整 ...

  2. js和jquery中的事件委托

    [转+自己的修改] 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却 ...

  3. JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器

    有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: Ja ...

  4. js中的事件委托或是事件代理

    JavaScript(jQuery)中的事件委托 https://www.cnblogs.com/zhoushengxiu/p/5703095.html js中的事件委托或是事件代理详解 https: ...

  5. 简单说 JavaScript中的事件委托(下)

    说明 上次我们说了一些,关于 JavaScript中事件委托的 基础知识,这次我们继续来看. 解释 先来一段代码 <!doctype html> <html lang="e ...

  6. 怎么理解js中的事件委托

    怎么理解js中的事件委托 时间 2015-01-15 00:59:59  SegmentFault 原文  http://segmentfault.com/blog/sunchengli/119000 ...

  7. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  8. Javascript事件模型系列（三）jQuery中的事件监听方式及异同点

    作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...

  9. jQuery中的事件监听方式及异同点

    jQuery中的事件监听方式及异同点 作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery&g ...

随机推荐

  1. STL中set和map

    set 可以认为是数学上的集合,集合中的元素不允许有重复.set特有的操作是高效的插入.删除和执行基本查找. set的插入方法是 insert,由于集合元素的唯一性,insert操作不一定会成功,in ...

  2. 产品经理都知道MVP，但是它可能不再是产品研发最好的模型了

    产品经理都知道MVP,但是它可能不再是产品研发最好的模型了 孟小白Aspire • 2017-09-01 • 汽车交通 要简单.讨喜.完整,不要最小可行性产品.这对创业公司的第一个产品来说很重要. M ...

  3. MySQL无法启动、服务没有报告任何错误&初次登陆错误的解决

    先以管理员身份运行cmd(右键单击左下角win菜单) 输入mysqld -install,net start mysql,下图是返回结果.报错情况以及修正之后的全过程 启动失败之后输入mysqld - ...

  4. 第一章：了解SQL_数据库基础

    什么是数据库(database): 数据库(database)是保存有组织的数据的容器(通常是一个文件或一组文件).数据库是一种以某种有组织的方式存储的数据集合.   表(table): 表(tabl ...

  5. .Net Core+Vue.js+ElementUI 实现前后端分离

    .Net Core+Vue.js+ElementUI 实现前后端分离 Tags: Vue 架构 前端采用:Vue.js.Element-UI.axios 后端采用:.Net Core Mvc 本项目是 ...

  6. springMVC入门-07

    删除功能实现,对应controller类中的代码如下所示: @RequestMapping(value="/{username}/delete",method=RequestMet ...

  7. 转：HTTP Status 404(The requested resource is not available)的几种解决方法

    原文地址 原因:servlet没有配置正确 ,查看web.xml确认正确,以及自己的请求路径正确 在IE中提示“404”错误有以下三种情况 1．未部署Web应用 2．URL输入错误 排错方法: 首先, ...

  8. Ubuntu Linux 14.04 LTS 上安装php7+mysql+nginx

    输入 $ sudo apt-get install -y language-pack-en-base$ sudo LC_ALL=en_US.UTF-8 add-apt-repository ppa:o ...

  9. JavaScript数组方法的兼容性写法 汇总：indexOf()、forEach()、map()、filter()、some()、every()

    ECMA Script5中数组方法如indexOf().forEach().map().filter().some()并不支持IE6-8,但是国内依然有一大部分用户使用IE6-8,而以上数组方法又确实 ...

  10. RTCM32编解码中的一些概念及相关文献阅读

    1. IODC和 IODE ——  导航电文相关.iode/iodc是在GPS系统的ICD2中定义的参数,iode指星历数据事件,iodc指星钟数据事件. IOD 是 issue of data ,数 ...