在jquery中有一个很重要的概念——事件委派,相信很多搞前端开发的人都听说过,零度逍遥本来对此不是十分理解,但经过一个高人的指点后,才发现这个功能还是蛮强大的,今天就给大家分享一下。

事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。

说的有点抽象,按照惯例,还是举个例子说明:

<ul class="list">
<li>11111<li>
<li>222222<li>
<li>3333<li>
<li>4444<li>
</ul>

这是一个ul,里面包含4个li,如果想要给li加上点击事件,弹出一些内容,我们一般这样写:

$('.list li').click(function(){
alert(1111);
})

这样当我们点击list里面的任何一个li都可以弹出‘1111’,但这样做有两个弊端:

1.很耗费资源,因为这种方式是给每个li都加上了事件,li的个数少的话还没事,如果li多的话会很耗费资源。

2.如果后期动态添加li,不会拥有这个弹出事件。

针对以上问题,可以用事件委派来解决,我们完全可以写出这样一段代码:

$(".list").delegate("li", "click", function(){
alert(1111);
});

这个就是jquery的事件委派,有的时候还是很能派上用场的,骚年们,玩起来吧!

什么是jquery中的事件委派?的更多相关文章

  1. jQuery中的事件绑定方法

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

  2. jQuery:详解jQuery中的事件(二)

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  3. jQuery:详解jQuery中的事件(一)

    之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...

  4. jQuery学习笔记(三)jQuery中的事件

    目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一.加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...

  5. Javascript事件模型系列(三)jQuery中的事件监听方式及异同点

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

  6. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  7. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

  8. jQuery中的事件机制深入浅出

    昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...

  9. jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

随机推荐

  1. 文档控件NTKO OFFICE 详细使用说明之预览Excel文件(查看、编辑、保存回服务器)

    1.在线预览Excel文件 (1) 运行环境 ① 浏览器:支持IE7-IE11(平台版本还支持Chrome和Firefox) ② IE工具栏-Internet 选项:将www.ntko.com加入到浏 ...

  2. C# treeView 控件

    #region --基础 ////设置目录树 ////添加根节点 //treeView1.Nodes.Add("0000000"); ////添加子节点 ////treeView1 ...

  3. sqlserver 时间测试

    select * from GropBy where [date] BETWEEN '2010-10' and '2015-10' --从字符串转换日期和/或时间时,转换失败. select * fr ...

  4. 接口测试及Postman工具

    首先,什么是接口呢? 接口一般来说有两种,一种是程序内部的接口,一种是系统对外的接口.系统对外的接口:比如你要从别的网站或服务器上获取资源或信息,别人肯定不会把数据库共享给你,他只能给你提供一个他们写 ...

  5. yum 安装nginx(配置开机启动)

    yum install -y nginx 通过yum安装的时候提示下面的错误 [root@localhost yum.repos.d]# yum install nginx 已加载插件:fastest ...

  6. Nginx+Keepalived(双机热备)搭建高可用负载均衡环境(HA)-转帖篇

    原文:https://my.oschina.net/xshuai/blog/917097 摘要: Nginx+Keepalived搭建高可用负载均衡环境(HA) http://blog.csdn.ne ...

  7. Project Euler 39 Integer right triangles( 素勾股数 )

    题意:若三边长 { a , b , c } 均为整数的直角三角形周长为 p ,当 p = 120 时,恰好存在三个不同的解:{ 20 , 48 , 52 } , { 24 , 45 , 51 } , ...

  8. CentOS 笔记(四) Jexus部署相关

    ①设置jexus 为服务 cd /lib/systemd/system/ sudo vi jexus.service #注意 jexus 实际路径 [Unit] Description=jexus A ...

  9. 玩家福音:10款最佳Linux免费游戏

    “我能在Linux平台上游戏吗?”这类疑问正困扰游戏玩家,那么答案就是“快去Linux平台吧!”.开源组织一直以来坚持不懈为Linux操作系统开发不同类型的游戏,在Linux平台下的游戏完全不亚于其他 ...

  10. ORM框架 SQLAlchemy

    什么是ORM 使用关系对象映射进行数据库操作. 将对象转换成SQL,然后使用数据API执行SQL并获取执行结果. 分类 -DB first 手动创建数据库和表,自动生成类 -code first 手动 ...