专栏首页web前端教室JavaScript-事件委托(事件代理)

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),作者:老尚

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何从零开始,形成自己的模块化思维方式?

    计算机这东西不是凭空出现的,它是为了解决一些实际的问题,有很多时候是对现实世界的模拟。遇到问题时,经常会有人说,要有大局观,要具体问题具体分析,也可以牵强的解释...

    web前端教室
  • [周末课程]什么是“页面业务流程”分析思维导图?如何编写页面假JSON数据? &下一个前端组件“日历”

    大家好,时间飞快一晃又到了周末了,今天要跟大家一起学习的有以下这些内容: -- 什么是“页面业务流程”分析思维导图?如何编写页面假JSON数据? -- 进入下一...

    web前端教室
  • 最开始时,我是怎么搞懂开发思路的?

    在我刚开始做前端,写js的时候,这个问题曾经长久的困扰着我。面对一个UI设计图,我的脑子里是一团乱,完全无从下手,当初就是拿到UI图的时候,我看着图竟然走神了。...

    web前端教室
  • jquery循环 each()

    对jquery选择的对象集合分别进行操作,需要用到jquery循环操作,此时可以用对象上的each方法:

    Devops海洋的渔夫
  • 算法基础

    人生不如戏
  • Pug迭代

    听着music睡
  • pyhon 列表的增删改查

    py3study
  • 第3章 排列清单控制标记

    排列清单控制标记可以创建一般的列表、编号列表或加着重号列表,以及定义列表。还可以在一种列表中嵌套另外一种列表。对于概况因特网上的内容,列表特别重要。

    py3study
  • js 为 li 循环添加 class

    前段时间有个小伙伴想在新闻列表页面的 ul 里面为每个 class 循环添加带 1  2  3  4的 class,正巧昨天做一个站也用到了类似 for 循环,...

    Savalone
  • li、img等元素设置inline-block后的空白间距问题

    关于使用 inline-block 来代替 float 的讨论也挺多的,最常见的就是使用 inline-block 来代替 float 进行布局。

    德顺

扫码关注云+社区

领取腾讯云代金券