JavaScript中事件委托的示例详解

目录
  • 事件流
  • 事件委托
  • 结尾

大家好，我是前端西瓜哥。今天我们来认识一下事件委托。

所谓事件委托，就是将原本应该在当前元素绑定的事件，放到它的祖先元素上，让祖先元素来委托处理。

事件流

事件流指从页面中接收事件的顺序，也可理解为事件在页面中传播的顺序。

事件流由两阶段组成：

  • 捕获事件
  • 冒泡事件

我们通常用 addEventListener 给元素添加事件：

document.querySelector('#card')addEventListener(
  'click',
  function (event) {
   console.log('div#card 冒泡点击', event);
 },
  false
);

第一个参数是事件名，第二个参数是事件响应函数，可以拿到当前的事件对象。

第三个参数是可选的，表示监听的是否为捕获阶段，false为冒泡阶段，也是默认值，true 为捕获阶段。我们常用的是冒泡阶段。

当我们点击元素时，就会执行这个函数。

假设我们的 DOM 结构如下：

<html>
  <head>
    <title>前端西瓜哥</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <div id="box-1">
        <div id="card">card</div>
      </div>
      <div id="box-2"></div>
    </div>
  </body>
</html>

现在我们点击 card 文字时，DOM 就会产生事件流。

事件流首先会进入 捕获阶段，从根节点往目标元素（div#card）移动，依次经过为：

  • window
  • document（文档根元素，在 HTML 中没有显式声明）
  • document.documentElement（<html> ）
  • document.body（<body>）
  • ...
  • 目标元素 div#card

和调用事件对象的 event.composedPath() 方法拿到的 事件路径 类似。

window 看起来是个全局变量，但它也是可以绑定事件的，比如窗口大小改变的 resize 事件就只能绑定到 window 上，而不能绑定到 document 上。

然后再执行 冒泡阶段，然后反着再经过一遍这些节点。

我们会根据事件流经过的顺序，依次执行这些节点上绑定的对应事件函数。

事件委托

假如我有一个好友列表，我希望点击 “聊天” 按钮，拿到对应用户 id，创建并进入到对应用户的聊天会话中。

<ul>
  <li>前端西瓜哥<button>聊天</button></li>
  <li>fe_watermelon<button>聊天</button></li>
  <!-- ... -->
  <li>老王<button>聊天</button></li>
</ul>

最直接的方式是给所有的 button 元素都绑定各自的事件。

节点少的时候还好，如果节点多达上千上万个，就需要声明相当多的事件函数，比较消耗内存。而且 如果列表经常发生动态变更，也会导致大量事件监听的移除和绑定。

在这种情况下，事件委托就大有可为了。

事件委托正是利用事件流的冒泡特性，将本来要绑定到多个元素的事件函数，委托到了其祖先元素上。

在上面这个例子中，我们可以将事件绑定到 ul 节点上，执行函数时，通过 event 对象拿到必要的信息，进行统一的操作。

document.querySelector('ul').addEventListener('click', (event) => {
  const target = event.target;
  const userId = target.getAttribute('data-user-id');
  if (userId) {
    joinChat(userId);
  }
});

通过 event.target 我们能获得这次事件流的目标节点，然后从该节点对象中提取出需要的信息。

在这里我们需要拿到用户 id，所以需要给 button 元素添加类似 data-user-id 的自定义属性，像这样子：

<ul>
  <li>前端西瓜哥<button data-user-id="5">聊天</button></li>
  <li>fe_watermelon<button data-user-id="99">聊天</button></li>
  <!-- ... -->
  <li>老王<button data-user-id="63">聊天</button></li>
</ul>

这样，不管 li 有多少，更新多频繁，我们只需要维护一个函数就够了。

结尾

事件委托，其实就是将原本应该绑定在子元素的的大量类似的事件监听函数，改为绑定到父元素或祖先元素上，委托祖先元素来处理。

不过在实际开发中，需要用到事件为委托的场景还是比较少，因为我们的列表通常不会太长。

到此这篇关于JavaScript中事件委托的示例详解的文章就介绍到这了,更多相关JavaScript事件委托内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解js的事件代理（委托）

    JavaScript事件代理(委托)一般用于以下情况: 1. 事件注册在祖先级元素上,代理其子级元素.可以减少事件注册数量,节约内存开销,提高性能. 2. 对js动态添加的子元素可自动绑定事件. 之前一直用各种js库的事件代理,如 jQuery,非常方便实用.今天尝试用原生 js 实现该功能. var addEvent = (function () { if (document.addEventListener) { return function (element, type, handler

  • js事件委托详解

    1.每个函数都是对象,占用内存.内存中的对象越多,性能越差.解决事件处理过多问题的办法是事件委托. 2.事件委托冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 实例 <ul id="myLinks"> <li id="myLi1">text1</li> <li id="myLi2">text2</li> <li id="myLi3">text

  • JavaScript事件委托原理

    JavaScript事件委托原理

    目录 一.什么是事件委托 二.事件委托的原理 三.事件委托的作用 一.什么是事件委托 事件委托也称为事件代理.就是利用事件冒泡,把子元素的事件都绑定到父元素上.如果子元素阻止了事件冒泡,那么委托就无法实现. 举个简单的例子: 例如快递员有100个快递要分别送给100个学生, 如果一个个的送花费时间较长.同时每个学生领取的时候,也需要排队领取,也花费时间较长,应该怎样操作呢?这时快递员可以把100个快递委托给班主任,班主任把这些快递放到办公室,同学们下课自行领取即可.这样的话,快递员省事,同学们领

  • JS中的事件委托实例浅析

    本文实例讲述了JS中的事件委托.分享给大家供大家参考,具体如下: 事件委托(也叫事件代理),其实这个问题也简单,要想弄明白事件委托,我们先要把事件冒泡的机制搞清楚.举个事件冒泡的例子: <ul> <li>点击</li> </ul> <script> var ul=document.getElementsByTagName('ul')[0]; var li=document.getElementsByTagName('li')[0]; ul.add

  • js事件委托和事件代理案例分享

    什么是事件委托/事件代理 利用事件的冒泡传播机制(触发当前元素的某一个行为,它父级所有元素的相关行为都会被触发),如果一个容器中有很多元素都要绑定点击事件,我们没有必要一个个的绑定了,只需要给最外层容器绑定一个点击事件即可,在这个方法执行的时候,通过事件源的区分来进行不同的操作. 具体小案例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

  • JavaScript事件的委托(代理)的用法示例详解

    JavaScript事件的委托(代理)的用法示例详解

    目录 简介 示例:事件委托 写法1:事件委托 写法2:每个子元素都绑定事件 示例:新增元素 写法1:事件委托 写法2:每个子元素都绑定事件 简介 说明 本文用示例介绍JavaScript中的事件(Event)的委托(代理)的用法. 事件委托简介 事件委托,也叫事件代理,是JavaScript中绑定事件的一种常用技巧.就是将原本需要绑定在子元素的响应事件委托给父元素或更外层元素,让外层元素担当事件监听的职务. 事件代理的原理是DOM元素的事件冒泡. 事件委托的优点 1.节省内存,减少事件的绑定 原

  • JavaScript中事件委托的示例详解

    JavaScript中事件委托的示例详解

    目录 事件流 事件委托 结尾 大家好,我是前端西瓜哥.今天我们来认识一下事件委托. 所谓事件委托,就是将原本应该在当前元素绑定的事件,放到它的祖先元素上,让祖先元素来委托处理. 事件流 事件流指从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序. 事件流由两阶段组成: 捕获事件 冒泡事件 我们通常用 addEventListener 给元素添加事件: document.querySelector('#card')addEventListener( 'click', function (ev

  • JavaScript中事件冒泡机制示例详析

    JavaScript中事件冒泡机制示例详析

    什么是冒泡? DOM事件流(event  flow )存在三个阶段:事件捕获阶段. 处于目标阶段. 事件冒泡阶段. 事件捕获(event  capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件. 事件冒泡(dubbed  bubbling):与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点. dom标准事件流的触发的先后顺序为:先捕

  • JavaScript中变量提升机制示例详解

    变量提升 JavaScript的变量提升有两种,用var声明的变量以及用function声明的变量. 用var声明的变量 我们先来看下面这段代码,a的值是多少 代码1 console.log(a); var a; 按照以往编程语言的思路来看,代码自上而下运行,按这种思路,会报错,因为执行到第2行时,变量a还没有定义,所以会报错a is not defined 然而事实上答案是undefined 好,抱着疑惑,我们看下面的代码 var a; console.log(a); 我们发现,这两段代码是一

  • JavaScript中浅讲ajax图文详解

    JavaScript中浅讲ajax图文详解

    1.ajax入门案例 1.1 搭建Web环境 ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 对于JavaWeb项目而言,ajax主要用于浏览器和服务器之间数据的传输. 如果是单单地堆砌知识点,会显得比较无聊,那么根据惯例,我先不继续介绍ajax,而是来写一个案例吧. 打开

  • JavaScript 中调用 Kotlin 方法实例详解

    JavaScript 中调用 Kotlin 方法实例详解 Kotlin 编译器生成正常的 JavaScript 类,可以在 JavaScript 代码中自由地使用的函数和属性 .不过,你应该记住一些微妙的事情. 用独立的 JavaScript 隔离声明 为了防止损坏全局对象,Kotlin 创建一个包含当前模块中所有 Kotlin 声明的对象 .所以如果你把模块命名为 myModule,那么所有的声明都可以通过 myModule 对象在 JavaScript 中可用.例如: fun foo() =

  • JavaScript中的splice方法用法详解

    JavaScript中的splice主要用来对js中的数组进行操作,包括删除,添加,替换等. 注意:这种方法会改变原始数组!. 1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 2.插入-向数组指定位置插入任意项元素.三个参数,第一个参数(插入位置),第二个参数(0),第三个参数(插入的项) 3.替换-向数组指定位置插入任意项元素,同时删除任意数量的项,三个参数.第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项) 示例:

  • JavaScript中window和document用法详解

    JavaScript中window和document用法详解

    一.验证表单 封装一个函数用于验证手机号 /** * @param {String}eleId * @param {Object}reg */ function checkInput(eleId,reg) { var ele = document.getElementById(eleId); ele.onblur = function (ev) { if(!reg.test(this.value)){ //不匹配 this.style.borderColor = "#ff0000" /

  • Java中的反射机制示例详解

    Java中的反射机制示例详解

    目录 反射 什么是Class类 获取Class实例的三种方式 通过反射创建类对象 通过反射获取类属性.方法.构造器 更改访问权限和实例赋值 运用场景 反射 反射就是把Java类中的各个成分映射成一个个的Java对象.即在运行状态中,对于任意一个类,都能够知道这个类的所以属性和方法:对于任意一个对象,都能调用它的任意一个方法和属性.这种动态获取信息及动态调用对象方法的功能叫Java的反射机制 每一个Java程序执行必须通过编译.加载.链接和初始化四个阶段 1.编译:将.java.文件编译成字节码.

  • JavaScript中Array的filter函数详解

    目录 描述 理解 示例 原生实现 描述 filter为数组中的每个元素调用一次callback函数,并利用所有使得callback返回 true 或等价于 true 的值的元素创建一个新数组.callback只会在已经赋值的索引上被调用,对于那些已经被删除或者从未被赋值的索引不会被调用.那些没有通过callback 测试的元素会被跳过,不会被包含在新数组中. 理解 filter不会改变原数组,它返回过滤后的新数组. filter遍历的元素范围在第一次调用callback之前就已经确定了.在调用f

  • JavaScript中push(),join() 函数 实例详解

    定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) arrayObject.join(separator). 参数描述newelement1必需.要添加到数组的第一个元素.newelement2可选.要添加到数组的第二个元素.newelementX可选

随机推荐