文档章节

直接事件和委托事件

kevin_pang
 kevin_pang
发布于 2016/03/21 15:10
字数 274
阅读 87
收藏 2

有很多人问过我这个问题,如下:


$('ul li').on('click', function () {
   //TODO
});

$('ul').on('click', 'li', function () {
   //TODO
});


这两段代码有何区别?

jquery的官网文档中有详细的解释:

第1段的意思是把事件直接绑定在li上面,如果有N个li,那么就相当于绑定了N次li。而且只能绑定到文档中已经存在的li上面,后续添加的li是绑定不上的,比如通过ajax添加进去的新的li。 这就是直接事件绑定。

第2段是委托事件,也叫代理事件,只绑定了一次事件到li上面,也可以监听到后续添加的li。

两者的使用场景是有细微区别的,如果你只需要对已有的dom节点绑定事件,可以用第一种写法,也可以用第二种,

而当你需要全量监听时,特别是针对ajax动态引入的dom节点进行事件绑定时,应该用第二种。





© 著作权归作者所有

kevin_pang
粉丝 9
博文 49
码字总数 80470
作品 0
深圳
程序员
私信 提问
加载中

评论(1)

谁说我不是会员
谁说我不是会员
挺有用的小知识
C#语法——事件,逐渐边缘化的大哥。

事件是C#的基础之一,学好事件对于了解.NET框架大有好处。 事件最常见的比喻就是订阅,即,如果你订阅了我的博客,那么,当我发布新博客的时候,你就会得到通知。 而这个过程就是事件,或者说...

kiba518
2018/08/13
0
0
js中的事件委托或是事件代理详解

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

菜鸟的进阶
2017/10/22
6
0
event 和delegate的分别

突然想起delegate委托是支持+= 和-=操作的,然后研究一下究竟这个是怎么做到的,好模仿一下。一开始以为是+=的运算符重载,但是在类库参考中并没有这个运算符重载,只有!= 和==运算符重载。有...

诺贝尔
2018/08/22
0
0
jquery live() delegate() on() 事件委托的一些区别

随着DOM结构的复杂化和Ajax等动态脚本技术的运用,有了较多的动态添加进来的元素,直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到,在这里就需要用到事件委托方法,JQ为事件委...

rikkilovelife
2015/03/20
7.7K
0
重温面向对象核心 下 : 你一定能看懂的委托和事件

实例解读面向对象核心,所有例子基于 C#,涉及我们实务中最常关心的问题: 1、封装、继承、多态; 2、抽象类、接口; 3、委托、事件。 三、委托和事件 通俗的说,我们使用委托的目的是“实现...

编程小纸条
08/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
312
5
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
10
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部