什么是jquery中的事件委派?
在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中的事件委派?的更多相关文章
- jQuery中的事件绑定方法
在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...
- jQuery:详解jQuery中的事件(二)
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- jQuery:详解jQuery中的事件(一)
之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...
- jQuery学习笔记(三)jQuery中的事件
目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一.加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...
- Javascript事件模型系列(三)jQuery中的事件监听方式及异同点
作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...
- jQuery中的事件与动画 (你的明天Via Via)
众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...
- Jquery中的事件和动画
在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...
- jQuery中的事件机制深入浅出
昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...
- jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2
第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){ // 编写代码... }); 可以简写成: $(function( ...
随机推荐
- website robots.txt 防爬虫 措施
robots.txt文件用法举例: 1. 允许所有的robot访问 User-agent: * Allow: / 或者 User-agent: * Disallow: 2. 禁止所有搜索引擎访问网站的 ...
- java8 Stream 笔记
stream的定义:对一个源中的一系列元素进行聚合操作. 一系列元素:stream对一组有特定类型的元素提供了一个接口.但是stream并不真正存储元素,元素根据需求被计算出来. 源:stream可以 ...
- 使用新的CSS类型对象模型
el.attributeStyleMap.set('padding', CSS.px(42)); const padding = el.attributeStyleMap.get('padding') ...
- WinRAR 5.60 无广告正式版
首先明确WinRAR唯一的官网是这个 https://www.rarlab.com/ 其余的都不要相信. 现在的问题是:不要脸的中国代理强行捆绑广告:即使你花钱注册同样要面对弹窗广告!这就不可接受了! ...
- Python框架、库和软件资源大全(整理篇)
有少量修改,请访问原始链接.PythonWIn的exe安装包;http://www.lfd.uci.edu/~gohlke/pythonlibs/ 原文链接:codecloud.net/python- ...
- 杭电 1021 Fibonacci Again
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1021 解题思路:根据之前发现斐波那契数列的规律,即为f(n)能被3整除当且仅当n能被4整除. 于是联想 ...
- Swift 中实现 Promise 模式
在异步编程中,除了竟态处理.资源利用以外,另外一个难点就是流程管理.在拥有匿名函数.闭包这些特性的编程语言中,我们通常可以使用回调函数来做一个异步任务完成或失败时的处理.但当我们的业务逻辑逐渐复杂时, ...
- hibernate一对多和多对一配置
public class Dept { private int deptId; private String deptName; // [一对多] 部门对应的多个员工 private Set<E ...
- JS中增加日期格式化原型函数之prototype
/** * javascript Date format(js日期格式化) * 对Date的扩展,将 Date 转化为指定格式的String 月(M).日(d).小时(h).分(m).秒(s).季度( ...
- [2] day 02
1. df.memory_usage()将返回每列占用多少 要包含索引,请传递index=True所以要获得整体内存消耗: 2. numpy.iinfo 3. shift函数 https://blog ...