事件委托是什么

利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!

1、那什么样的事件可以用事件委托,什么样的事件不可以用呢?

  • 适合用事件委托的事件:click,mousedown,mouseup,keydown,keyup,keypress。
  • 值得注意的是,mouseover 和 mouseout 虽然也有事件冒泡,但是处理它们的时候需要特别的注意,因为需要经常计算它们的位置,处理起来不太容易。
  • 不适合的就有很多了,举个例子,mousemove,每次都要计算它的位置,非常不好把控,在不如说 focus,blur 之类的,本身就没用冒泡的特性,自然就不用事件委托了。

2、为什么要用事件委托

  • 1.提高性能

<ul><li>苹果</li><li>香蕉</li><li>凤梨</li>
</ul>// good
document.querySelector('ul').onclick = (event) => {let target = event.targetif (target.nodeName === 'LI') {console.log(target.innerHTML)}
}// bad
document.querySelectorAll('li').forEach((e) => {e.onclick = function() {console.log(this.innerHTML)}
})
  • 2.新添加的元素还会有之前的事件。

3、事件冒泡与事件委托的对比

  • 事件冒泡:box 内部无论是什么元素,点击后都会触发 box 的点击事件
  • 事件委托:可以对 box 内部的元素进行筛选

4、事件委托怎么取索引?

    <ul id="ul"><li> aaaaaaaa </li><li> 事件委托了 点击当前, 如何获取 这个点击的下标 </li><li> cccccccc </li></ul>window.onload = function() {var oUl = document.getElementById("ul");var aLi = oUl.getElementsByTagName("li");oUl.onclick = function(ev) {var ev = ev || window.event;var target = ev.target || ev.srcElement;if (target.nodeName.toLowerCase() == "li") {var that = target;var index;for (var i = 0; i < aLi.length; i++)if (aLi[i] === target) index = i;if (index >= 0) alert('我的下标是第' + index + '个');target.style.background = "red";}}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/27965.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot+Vue实现Excel文档导入和导出

1.准备工作 1.1.前端程序 在前端首先加上批量导出的按钮&#xff0c;如下 <el-button size"small" type"warning" plain click"exportData"> 批量导出 </el-button> 在添加了点击事件之后&#xff0c;在methods中要与之对应的添加上…

c#引用dll报错cs8370功能“本地函数特性“在c#7.3中不可用

cs8370:功能"本地函数特性"在c#7.3中不可用 解决方法&#xff1a; 代码放在form类里面

SJ703安全帽防静电测试仪

一、仪器用途 专门检测安全帽防静电性能。 二、仪器特征 1、携带使用轻便、量程宽广、读数准确&#xff0c;耐震性强等卓越优点 2、超上限时显示‘1’提示和低于下限时声响报警。 3、电池欠压时显示欠压符号“←”提示。 4、交流或直流&#xff08;电池&#xff09;供电任…

【Vue3】使用v-model实现父子组件通信(常用在组件封装规范中)

历史小剧场 历史告诉我们&#xff0c;痞子就算混一辈子&#xff0c;也还是痞子&#xff0c;滑头&#xff0c;最后只能滑自己。长得帅&#xff0c;不能当饭吃。 成大器者的唯一要诀&#xff0c;是能吃亏。 吃亏就是占便宜&#xff0c;原先我不信&#xff0c;后来我信了&#xff…

Oracle数据库之多行函数(十九)

Oracle多行函数&#xff08;也称为聚合函数或组函数&#xff09;作用于一组数据&#xff0c;并对该组数据返回一个单一的值。这些函数在处理分组数据或对整个表进行汇总操作时非常有用。以下是一些常见的Oracle多行函数及其描述&#xff1a; 1. AVG 功能&#xff1a;计算某列…

Java17 --- RabbitMQ之插件使用

目录 一、Federation插件 1.1、运行两个rabbitmq实例 1.2、启用插件 1.3、在下游端点添加上游端点 1.4、创建策略 1.6、测试 二、联邦队列 2.1、创建策略 2.2、创建交换机与队列 2.2.1、创建52000的队列与交换机 2.2.2、创建62000的队列 三、Shovel 3.1、启…

Echats-wordcloud 文字云图的踩坑点【Unknown series wordCloud】

在词云渲染时遇到渲染不出来的问题&#xff1a; 原因分析&#xff1a; 1、echart和wordcloud版本不匹配&#xff08;我的是匹配的&#xff09; 解决方案&#xff1a; 1、echart和wordcloud版本要匹配&#xff1a; echart4x 使用wordcloud1x版本 echart5x 使用wordcloud2x版本…

Echarts图表: 矩形树图都有哪些配置项,一文告诉你

Hello&#xff0c;本期和大家分享矩形树图的配置项&#xff0c;欢迎评论区和贝格前端工场互动交流。 一、矩形树图是什么 矩形树图是ECharts中的一种图表类型&#xff0c;用于展示树形结构的数据。矩形树图通过矩形的大小和位置来表示树形结构中节点的层次关系和数据的大小。…

C语言:头歌计算两数的和与差

任务描述 本关任务&#xff1a;本题要求实现一个计算输入的两数的和与差的简单函数。 函数接口定义&#xff1a; void sum_diff( float op1, float op2, float *psum, float *pdiff ); 其中op1和op2是输入的两个实数&#xff0c;*psum和*pdiff是计算得出的和与差。 主程序样…

实例化游戏物体的实例(生成游戏物体)

一、实例1&#xff1a;实例化 1、准备工作&#xff1a;制备预制体&#xff0c;命名。如Circle 2、Create Empty&#xff0c;名字自取。如&#xff1a;CirclePrefab 3、给CirclePrefab添加Test.cs public GameObject CirclePrefab; // 预制体变量&#xff0c;用于存储Circle预…

基于matlab的MTCNN(多任务卷积神经网络)人脸检测算法

关键词&#xff1a;Matlab&#xff1b;深度学习&#xff1b;多任务卷积神经网络&#xff1b;人脸检测&#xff1b; 背景 在不受约束的环境中&#xff0c;由于个体姿势的多样性、光照条件的变化以及潜在的遮挡问题&#xff0c;人脸检测和对齐任务面临诸多挑战。近期的研究表明…

ad18学习笔记22:关于keep out layer禁止布线层

ad18里的新特性&#xff0c;在 keep out层无法直接放置线条&#xff0c;需要去菜单-放置-keepout进行画线&#xff0c;如果&#xff0c;在其他层画了一个图形&#xff0c;无法直接修改这个图形的属性&#xff0c;把他变为keepout的线条&#xff0c;但是可以通过特殊粘贴操作&am…

Elasticsearch搜索引擎(高级篇)

3.1 查询语法 | 《ElasticSearch入门到实战》电子书 (chaosopen.cn) day09-Elasticsearch02 - 飞书云文档 (feishu.cn) 目录 第一章 DSL查询 1.1 基本语法 1.2 叶子查询 全文检索查询 精确查询 1.3 复合查询 算分函数查询 bool查询 1.4 排序 1.5 分页 基础分页 深度分…

numpy的基本操作

1.常用方法创建array print(np.array([1, 2, 3], dtype"f4"))# 32位浮点型 print(np.array([1.5, 2.2, 3]))# 默认浮点型 print(np.array([1, 2, 3, 4, 5], ndmin3))# 3维数组 print(np.array([range(i, i 5) for i in [1, 2, 3]]))# print(np.zeros(shape[5, …

从开源EPR产品Odoo学习

前言 一个先进、敏捷、经济高效、可快速扩展的Odoo免费开源企业信息化解决方案,让企业获得适应未来发展的长期创新和增长能力。 Odoo 的免费开源模式 让我们可利用无数开发人员和业务专家,在短短数年内,打造数百款应用。凭借强大的技术基础,Odoo 的框架是非常独特且优秀的…

RAW Sensor vs YUV Sensor:详细对比

目录 一、RAW传感器1.1 定义1.2 工作原理1.3 优点1.4 缺点1.5 应用场景二、YUV传感器2.1 定义2.2 工作原理2.3 优点2.4 缺点2.5 应用场景三、总结在现代智能手机和数码相机中,图像传感器(Image Sensor)是至关重要的组件,它决定了设备的图像捕捉能力。常见的图像传感器类型有…

LIMS(实验室)信息管理系统源码、有哪些应用领域?采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码

LIMS&#xff08;实验室&#xff09;信息管理系统源码、有哪些应用领域&#xff1f;采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码 LIMS实验室信息管理系统&#xff0c;是一种基于计算机硬件和数据库技术&#xff0c;集多个功能模块为一体的信息管理系统。该系统主…

前后端分离对于后端来说,是利好还是利弊呢?

前后端分离已经成为前端开发的主流模式&#xff0c;这种模式极大的解放了后端&#xff0c;让后端人员不再即当爹又当妈了&#xff0c;那么这种模式对于后端来说是利好还是利弊呢&#xff0c;如何趋利避害呢&#xff0c;贝格前端工场为大家分享一下。 一、什么前后端分离的开发…

Redis的一点入门了解

Redis NoSql概述 1、单机MySQL的时代 90年代&#xff0c;一个网站的访问量一般不会太大&#xff0c;单个数据库完全足够应付&#xff0c;技术上更多的会去使用静态页面html&#xff0c;对此服务器压根没多少压力&#xff1b; 但即使在这样的情况下&#xff0c;也会存在着一些…

【Linux】程序地址空间之动态库的加载

我们先进行一个整体轮廓的了解&#xff0c;随后在深入理解细节。 在动态库加载之前还要说一下程序的加载&#xff0c;因为理解了程序的加载对动态库会有更深的理解。 轮廓&#xff1a; 首先&#xff0c;不管是程序还是动态库刚开始都是在磁盘中的&#xff0c;想要执行对应的可…