JavaScript 事件委托(event delegation)

原创 2018年04月16日 10:37:29

事件委托 是将事件监听添加到父元素,而不是每个子元素单独设置监听器,当触发子元素时,事件会冒泡到父元素,监听器就会触发。

这种技术的好处是:

  • 内存占用少,因为只需要一个父元素的事件处理程序,而无需为每个后代元素都设置事件处理程序。
  • 无需从已删除的元素中解绑处理程序,也无需为新元素绑定处理程序。

例子1:

<ul id="parent-list">
                <li id="post-1">Item 1</li>
                <li id="post-2">Item 2</li>
                <li id="post-3">Item 3</li>
                <li id="post-4">Item 4</li>
                <li id="post-5">Item 5</li>
</ul>
<script>
            document.getElementById("parent-list").addEventListener("click",function(e){
                //e.target 是点击的元素
                if(e.target && e.target.nodeName == "LI"){
                //找到元素,输出Id
                    console.log("List item ",e.target.id.replace("post-","")," was clicked!");
                }
            });
</script>

运行结果:

例子2:

    <div id="myDiv">
        <p>first child</p>
        <a class="classA">second child</a>
        <div>third child</div>
        </div>
<script>
            document.getElementById("myDiv").addEventListener("click",function(e){
                if(e.target && e.target.matches("a.classA")){
                    console.log("Anchor element clicked!");
                }
            })
<script>

运行结果:
这里写图片描述

参考:(https://davidwalsh.name/event-delegate)

版权声明:本文为博主原创文章,转载请注明出处 https://blog.csdn.net/miss_zxm/article/details/79957465

防止Word文档的丢失

    唉!又断电了(又死机了……)!辛辛苦苦打的东西又没了。许多人都遇到过这样的事,不过如果你用的是Word2000的话,那我告诉你,照下面的做,可以将你的损失减少到最小(真的吗?)。不信请看:  ...
  • zhangjian80
  • zhangjian80
  • 2001-07-09 11:50:00
  • 833

JS事件委托(event delegation)

JS事件委托(event delegation)1. 什么是事件委托?事件委托又叫事件代理,字面意思其实很明朗,但是是谁委托谁呢?为什么要这么做呢?下面一一道来。2.事件委托的目的dom中需要有事件处...
  • Scrat_Kong
  • Scrat_Kong
  • 2017-09-03 12:58:59
  • 201

JavaScript 基础(001_Event Delegation)

Event Delegation(事件委托):简而言之,依赖于事件冒泡机制,当我们对 DOM 中的某个元素添加事件的时候,我们可以将事件添加到它的父节点上,即将事件委托给父节点,由父节点来处理事件的响...
  • Google2606
  • Google2606
  • 2016-09-16 15:45:43
  • 294

观察者模式(Observer)和委托事件模型(DEM)

观察者模式定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象。 这个主题对象在发生状态变化时会通知所有观察者对象,使他们能够自己更新自己。 观察者模式又叫发布/订阅(publish/...
  • a80596890555
  • a80596890555
  • 2017-03-27 23:03:58
  • 336

js | event delegation 事件委托之双十一

眼看双十一就要来了,周围的人寻思估摸着要“剁手,吃土”了,购物车里,那是加了一件又一件。话说马云师兄,咳咳,鄙人不才,同一母校,导开了电商之路后,那快递,可是摞了一叠,叠了再摞,纸山袋海。额,不好意思...
  • anmoran
  • anmoran
  • 2016-11-02 10:31:35
  • 396

js--事件--事件代理

1.事件流(事件捕获和事件冒泡) http://blog.csdn.net/github_34514750/article/details/53067077 2.事件循环(event loop) ...
  • github_34514750
  • github_34514750
  • 2016-11-07 16:06:04
  • 375

JBPM 3.2.3之【ERROR Delegation 】异常

    刚刚接触JBPM,理解不是太深刻,在测试节点异常功能的时候遇到了【ERROR Delegation 】异常ERROR Delegation : couldn't instantiate del...
  • yinyuan1987
  • yinyuan1987
  • 2010-08-20 11:17:00
  • 1384

纯js事件委托模式,委托父元素

1.点击前 2.点击后 内容代码: html> head> meta charset="UTF-8"> title>title> h...
  • a419419
  • a419419
  • 2018-01-20 21:27:11
  • 146

1.事件委托的原理以及优缺点 2. 手写原生js实现事件代理,并要求兼容浏览器

Q:事件的委托(代理 Delegated Events)的原理以及优缺点 A:委托(代理)事件是那些被绑定到父级元素的事件,但是只有当满足一定匹配条件时才会被挪。这是靠事件的冒泡机制来实现的, 优...
  • qi1271199790
  • qi1271199790
  • 2016-12-04 23:54:55
  • 3939

Event delegation in JavaScript

Event delegation in JavaScriptPosted at June 30, 2009 09:00 am by Nicholas C. ZakasTags: Delegation,...
  • caiyingying234
  • caiyingying234
  • 2011-06-20 22:34:00
  • 196
收藏助手
不良信息举报
您举报文章:JavaScript 事件委托(event delegation)
举报原因:
原因补充:

(最多只允许输入30个字)