javascript使用事件委托
事件委托是javascript中一个很重要的概念,其基本思路就是利用了事件冒泡的机制,给上级(父级)元素触发事件的dom对象上绑定一个处理函数。在当有需要很多dom对象要绑定事件的情况下,可以使用事件委托。即使是各个dom对象所触发的事件不同的时候,也可以通过事件委托,利用switch语句按需绑定事件,可以帮助我们减少大量的DOM绑定带来的内存开销。
从事件冒泡时开始就发生了事件委托,我们可以直接给父元素绑定事件监听,用来检测在其子元素内发生的事件。这也是类似 SproutCore(http://www.sproutcore.com/)这种框架所使用的技术,用来减少应用中的事件监听的数量 :
list.addEventListener("click", function(e){
if (e.currentTarget.tagName == "li") {
/* ... */
return false;
}
}, false);
jQuery 的处理方式更妙,只需给 delegate() 函数传入子元素的选择器、事件类型和回调函数即可。如果使用事件绑定的话,就会给每一个 l i 元素都绑定 click 事件,然而使用 delegate() 方法就能减少这种事件监听的数量,改善代码性能 :
$("ul li").click(function(){ /* ... */ }); // 不要这样做,这样会给每个 li 元素都添加事件监听(非常浪费)
$("ul").delegate("li", "click", /* ... */); // 这样只会添加一个事件监听
使用事件委托的另一个好处是,所有为元素动态添加的子元素都具有事件监听。因此,在上面的例子中,在页面载入完成后添加的 li 节点同样可以触发点击事件的回调。
javascript使用事件委托的更多相关文章
- JavaScript中事件委托(事件代理)详解
在JavaScript的事件中,存在事件委托(事件代理),那么什么是事件委托呢? 事件委托在生活中的例子: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托 ...
- JavaScript / JQuery事件委托如何实现?
一:什么是事件委托? 事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件. 事件委托就是利用事件冒泡原理实现的! 事件冒泡:就是事件从最深节点开始,然后逐步向上传播事件: 例:页面 ...
- Javascript的事件委托
在谈js的事件委托之前,先来简单说说js事件的一些基础知识吧. 什么是事件?Javascipt与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器中发生的一些特定的交互瞬间. 什么是事件流?事 ...
- javaScript绑定事件委托 demo
事件绑定通常发生在 onload 或 DOMContentReady , 事件绑定占用 处理时间 占用内存, 而且不是每个事件都会被 点击执行. 由此 事件委托 可以优化事件绑定行为.. 事件逐层冒泡 ...
- JavaScript之事件委托(附原生js和jQuery代码)
事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结 ...
- JavaScript, JQuery事件委托
1.引言 现实当中,前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.(公司也不会容忍那么多员工站在门口就为了等快递); 这种事件委托还有个好处,就是即便公司又来很多员工 ...
- Javascript事件模型系列(二)事件的捕获-冒泡机制及事件委托机制
一.事件的捕获与冒泡 由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监 ...
- 简单说 JavaScript中的事件委托(下)
说明 上次我们说了一些,关于 JavaScript中事件委托的 基础知识,这次我们继续来看. 解释 先来一段代码 <!doctype html> <html lang="e ...
- javascript事件监听与事件委托
事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件 ...
随机推荐
- OpenMPI源码剖析:网络通信原理(二) 如何选择网络协议?
因为比较常用的是 TCP 协议,所以在 opal/mca/btl/tcp/btl_tcp.h 头文件中找到对应的 struct mca_btl_tcp_component_t { mca_btl_ba ...
- PAT甲题题解-1017. Queueing at Bank (25)-模拟
有n个客户和k个窗口,给出n个客户的到达时间和需要的时长有空闲的窗口就去办理,没有的话就需要等待,求客户的平均时长.如果在8点前来的,就需要等到8点.如果17点以后来的,则不会被服务,无需考虑. 按客 ...
- 实训六(Cocos2dx游戏分享到微信朋友圈----AppID的获取)
考虑把游戏分享到微信朋友圈,前面的博文已经写到,shareSDK是一个很好的选择,但是学习了几天时间,遇到了很多问题,与其在一棵树上吊死,还不如退一步海阔天空,先暂时放一放,于是我考虑了一下既然是分享 ...
- Android的发展历程及搭建
Android的发展历程: 对于Android我比较不熟悉,因为我的第一只手机就是iphone,我没用过Android系统,但在中国使用带有Android系统的手机的人数是最多的,所以我想学习Andr ...
- Zero-shot learning(零样本学习)
一.介绍 在传统的分类模型中,为了解决多分类问题(例如三个类别:猫.狗和猪),就需要提供大量的猫.狗和猪的图片用以模型训练,然后给定一张新的图片,就能判定属于猫.狗或猪的其中哪一类.但是对于之前训练图 ...
- ubuntu18.04配置nvidia docker和远程连接ssh+远程桌面连接(一)
ubuntu18.04配置nvidia docker和远程连接ssh+远程桌面连接(一) 本教程适用于想要在远程服务器上配置docker图形界面用于深度学习的用户. (一)ubuntu18.04配置n ...
- PAT乙级(Basic Level)练习题-NowCoder数列总结
题目描述 NowCoder最近在研究一个数列: F(0) = 7 F(1) = 11 F(n) = F(n-1) + F(n-2) (n≥2) 他称之为NowCoder数列.请你帮忙确认一下数列中第n ...
- [OSChina]VirtualBox 6.0.0 发布,改进对高端显示器的 HiDPI 支持--尝试一下
VirtualBox 6.0.0 发布,改进对高端显示器的 HiDPI 支持 https://www.oschina.net/news/102838/virtualbox-6-0-0-released ...
- DataGridView列标题居中,内容居中
//列标题居中 dataGridView1.ColumnHeadersDefaultCellStyle.Alignment = DataGridViewContentAlignment.MiddleC ...
- Ubutnu linux 下升级python版本,以2.x升级到3.x为例
Linux操作系统一般 都会自带python,但是python版本会比主流低,故升级python, 主要思路:自带的python的链接link文件是在/usr/bin 下,采用sudo apt-get ...