js的事件的代理和委托

lewif 发布于2019-08-20 14:19 / 2939人阅读

摘要：本文要解释一下事件的代理或者说委托的概念，首先直接上定义事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。这种委托父元素执行事件，并利用事件冒泡的原理执行子元素相应函数的方法就叫事件的代理，或者叫事件的委托。

本文要解释一下JavaScript事件的代理或者说委托的概念，首先直接上定义：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。上来就看定义，可能有点懵，所以到了最重要的解析部分。


  1
  2
  3

我现在有一个列表，想弹出每个li里的值，一般的做法是

var list = document.getElementById("list");
var liArr = list.getElementsByTagName("li");
for (var i = 0; i < liArr.length; i++) {
  liArr[i].addEventListener("click", function () {
    alert(this.innerHTML);
  });
}

这个做法已经实现了想要的效果，但是试想一种情景

我现在有10000个li，要是做一个循环给每个li都加事件，简直是太耗性能了，于是事件的代理或者说委托就登场了。其实就是利用事件的冒泡原理来实现的。我点击一个元素，这个事件会沿着文档树一直向上传，直到根元素document。然后我给想要加事件的元素的父元素加上点击事件，委托它执行，然后再判断是它后代元素中的哪个元素触发的，运行相应函数。废话不多说，直接上代码。

document.getElementById("list").addEventListener("click", function (evt) {
  if (evt.target.tagName.toUpperCase() === "LI") {
    alert(this.innerHTML);
  }
});

这样写使代码变得简洁了，且没有了大量的循环，节省了内存，可以说是一举两得。
这种委托父元素执行事件，并利用事件冒泡的原理执行子元素相应函数的方法就叫事件的代理，或者叫事件的委托。

混合云私有云 js事件委托什么是js 事件委托委托事件事件委托

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81544.html

js 事件委托事件代理

摘要：事件委托事件代理高级程序设计上解释事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。事件委托原理事件委托是利用事件的冒泡原理来实现的，事件冒泡就是事件从最深的节点开始，然后逐级向上传播事件。 js 事件委托事件代理 JavaScript高级程序设计上解释：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。通过例子类比：有...

widuu 2019-08-23 14:44 评论0 收藏0
JavaScript 事件代理和委托

摘要：原文地址事件代理和委托在中这个词经常出现，看字面的意思，代理委托。模型将事件处理流程分为三个阶段一事件捕获阶段，二事件目标阶段，三事件起泡阶段。事件目标当到达目标元素之后，执行目标元素该事件相应的处理函数。原文地址：JavaScript 事件代理和委托在javasript中delegate这个词经常出现，看字面的意思，代理、委托。那么它究竟在什么样的情况下使用？它的原理又是什么？在...

littlelightss 2019-08-22 10:39 评论0 收藏0
浅谈Javascript事件委托（代理）

摘要：开玩笑啦，提供一种方法叫做事件委托。途中经过各个层次的，并在各上触发捕获事件，直到到达时间的目标。懂得了事件冒泡的过程，就很容易明白事件委托的运作原理。首先祝大家七夕快乐。。假如现在有一个的列表，里面可能会有若干个列表项。现在要为每一个列表项绑定相同的点击事件，现在你可能会有这几种做法：手动为每一个列表项绑定事件；在onload的时候，找到该列表，对其每一个子元素进行遍历，循环...

yunhao 2019-08-21 10:38 评论0 收藏0
【笔记】事件委托（即事件代理）知识点

摘要：事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素。事件委托原理事件委托就是利用事件冒泡原理实现的！事件冒泡：就是事件从最深节点开始，然后逐步向上传播事件；例：页面上有一个节点树，div > ul > li > a 比如给最里面的a 加一个click事件，那么事件就会一层一层的往外执行，执行顺序 a > li > ul > div...

forrest23 2019-08-20 17:28 评论0 收藏0
JS - 关于事件委托中的事件冒泡

摘要：结构如下项目名称项目名称列筛选图标代码如下点击列筛选图标这种事件委托的事件绑定方式，在这里出现了事件冒泡，虽然调用了，但仍然会触发绑定在上的排序事件。在使用 Datatables 表格插件开发过程中，给每一列的表头增加了自定义的列筛选功能，具体是给表头增加了一个可点击的图标，点击图标触发筛选，但是发现点击图标的时候同时会触发 Datatables 自带的排序功能。 showImg(h...

wuaiqiu 2019-08-23 16:28 评论0 收藏0