JavaScript-事件委托(事件代理)

今天给自己的知识结构填个坑,再复习下JS的事件代理。

事件代理可以给JS批量生成的DOM元素添加事件,并且还可以提高效率,因为你确实不用给每个DOM节点添加事件监听了。

事件的监听器,是被添加到了它们的父元素上,监听器会分析从新生成的子元素上冒泡上来的事件,并找到是哪个子元素的事件。

现在,有一个ul、li的列表了,,

<ul id="ulId">
  <li id="li-1">li 1</li>
  <li id="li-2">li 2</li>
  <li id="li-3">li 3</li>
  <li id="li-4">li 4</li>
  <li id="li-5">li 5</li>
  <li id="li-6">li 6</li>
</ul>

那么,当每个子元素被点击的时候,会发生不同的事件。而且这些Li的数量是不定的,因为它们是根据后端返回的JSON生成的。

那么这时,你需要把事件监听器放在它们的父容器 ulId 上面。

这时,当子元素被点击的事件,冒泡到父元素Li上的时候,你就可以通过检查事实的target,从而获取真正被点击的节点元素的引用。

看例子截图:

现在大部分JS都会使用jQuery等工具库来处理DOM事件,但对于事件委托的背后原理,我们还是要了解的。

浅谈数据结构 - 字典

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2016-02-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阿凯的Excel

快捷键-提速版

今天和大家分享的是快捷键提速版!!(什么是提速版,就是可以迅速提高你的工作速度哇!!貌似所有的Excel技巧都可以提高工作速度) 快捷键提速版正式开始 1、...

27930
来自专栏葡萄城控件技术团队

Spread for Windows Forms高级主题(3)---单元格的编辑模式

理解单元格的编辑模式 通常情况下,当终端用户双击单元格时,编辑控件将允许用户在该单元格中输入内容。在一个单元格中编辑的能力被称为编辑模式。一些属性和方法可以用来...

23960
来自专栏Google Dart

AngularDart Material Design 记分卡 顶

(adsbygoogle = window.adsbygoogle || []).push({}); fun...

14540
来自专栏小程序之家

如何使用小程序视图容器组件

在上一篇文章中,我们介绍了小程序入门开发的基础步骤,并通过几个Hello Word例子,让大家体验了下小程序的组件及API使用,接下来的教程中,我们将教大家详细...

6.6K30
来自专栏liulun

riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期

前文回顾 riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法; riot.js教程【一】简介; 访问DOM元素 你可以通过this.ref...

29370
来自专栏Timhbw博客

Markdown基本语法-自学收藏

2016-05-0918:27:15 发表评论 318℃热度 1.标题 2.待办事项 3.缩写定义 4. 文字格式 5.无序列表 6.有序列表 ...

335110
来自专栏云端架构

【云端架构】前端 css print 用法

说到网页打印,首先想到的便是@media查询(即网页css),通过使用媒体类型print即可解决实际应用的大多数问题,比如实现只打印网页的某部分内容,调整字体大...

46180
来自专栏不止是前端

Vue:父子组件信息传递

39380
来自专栏hotqin888的专栏

ppt(Powerpoint)中插入swf(flash)动画方式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

13020
来自专栏测试开发架构之路

0基础菜鸟学前端之Vue.js

  简介:0基础前端菜鸟,啃了将近半月前端VUE框架,对前端知识有了初步的了解。下面总结一下这段时间的学习心得。 文章结构 前端基础 Vue.js简介 Vue...

1.3K60

扫码关注云+社区

领取腾讯云代金券