当前位置: 首页 > news >正文

深入理解addEventListener中的第二个参数:listener

起因


        首先,之前留给我们的一点东西,js的深入内容关键在addEventListener,这个函数中的参数,它们三个参数,分别为type、listener、options,当然在这里还有一些小的问题,比如mdn文档中它介绍到了另一个参数:useCapture,它的语法中,options与useCapture是同级的。

        然后通过几篇博客来实现我对addEventListener的进一步认识,最终综合总结。

addEventListener的工作原理

        我认为如果需要学习addEventListener,并不能简单的学习它的这几个参数,同样需要对他的原理进行一定的学习。

        它这个方法呢,会把指定的监听器注册到EventTarget上,当这个对象触发了设置的第一个参数type/event时,指定的回调函数就会被执行。

        而他的工作原理呢,其实就是把要实现事件监听EventListener的函数或对象添加到调用它的EventTarget上的指定事件类型的事件监听器列表中。

        如果要绑定的函数或对象已经被添加到列表中,该函数或对象不会被再次添加。

 

listener

介绍:

        首先,仍然是先介绍一下这个东西,资料EventTarget.addEventListener() - Web API | MDN

       由此可知,这个玩意就是一个监听,表示触发监听后会发生的内容。

它必须是一个实现了EventListener接口的对象,或者是一个函数。

        怎么说呢,刚想查一查这个对象到底是什么东西,结果就看到了18年的解释,突然让我不知所措,但是觉得它写的不是很清楚,没有我看mdn文档的感觉清楚,但是看了看它的之后更清楚对象是什么了,给他点个赞。

 addEventListener中的EventListener接口对象遗漏的知识点:addEventListener的第 - 掘金

 回调函数

        因为这个事件监听器可以被指定为回调函数或者一个对象(其handleEvent()方法用作回调函数)。

而回调函数本身具有与handleEvent()方法相同的参数和返回值;

回调接收一个参数;一个基于Event的参数,描述已经发生的事件,没有返回值。

这个其实就很常见了,就像可以直接这么写

form.addEventListener('submit', function(e){

e.preventDefault();

alert("触发");

});

对象

        对象的话,就需要实现这个handleEvent(),这个东西就可以是其他的,比如:当这个listener是一个对象的时候,这个对象可以包含handleEvent属性,只要他实现这个属性就可以,然后这个属性的值还可以是一个函数,实质就和函数很像了。

 

<body><!-- <ul id="ul"><li id="1"></li><li id="2"></li><li id="3"></li><li id="4"></li><li id="5"></li></ul> --><form id="form"><fieldset><legend>Fruit juice size</legend><p><input type="radio" name="size" id="size_1" value="small" /><label for="size_1">Small</label></p><p><input type="radio" name="size" id="size_2" value="medium" /><label for="size_2">Medium</label></p><p><input type="radio" name="size" id="size_3" value="large" /><label for="size_3">Large</label></p><input type="submit" value="点击提交"/></fieldset></form><script type="text/javascript">// ul = document.getElementById("ul");// ul.addEventListener('click', function(){// 	alert("ul被点击了")// }, {capture: true, once: true});// form = document.getElementById("form");// form.addEventListener('submit', function(e){// 	alert("sub被点击了")// 	e.preventDefault();// }, {passive: true});form = document.getElementById("form");const myListenerObject = {handleEvent: function(e){alert("触发事件飞起来了")}}form.addEventListener('submit', myListenerObject);</script></body>

结尾

如上便是我的理解,如有高见,还请高人指路。 

相关文章:

深入理解addEventListener中的第二个参数:listener

起因 首先&#xff0c;之前留给我们的一点东西&#xff0c;js的深入内容关键在addEventListener&#xff0c;这个函数中的参数&#xff0c;它们三个参数&#xff0c;分别为type、listener、options&#xff0c;当然在这里还有一些小的问题&#xff0c;比如mdn文档中它介绍到了另…...

数据库镜像(Database Mirroring):高可用性与灾难恢复技术

一、引言 在现代信息系统中&#xff0c;数据的可用性和完整性至关重要&#xff0c;尤其是对金融、电商、医疗等高并发和高可靠性要求的行业。数据库镜像&#xff08;Database Mirroring&#xff09; 作为一种高可用性与灾难恢复技术&#xff0c;通过将主数据库的数据实时复制到…...

【Qt】按钮类控件:QPushButton、QRadioButton、QCheckBox、ToolButton

目录 QPushButton 例子&#xff1a; QRadioButton 例子&#xff1a; 按钮的常见信号函数 单选按钮分组 例子&#xff1a; QCheckButton 例子&#xff1a; QToolButton QWidget的常见属性及其功能对于它的派生类控件都是有效的(也就是Qt中的各种控件)&#xff0c;包括…...

day-21 内核链表以及栈

1.昨日作业 1.删除指定节点 找到删除就完事了&#xff0c;双向可以停在删除处。 /***************************** 功能&#xff1a;删除指定结点&#xff08;通过姓名&#xff09;* 参数&#xff1a;phead&#xff1b;oldname; * 返回&#xff1a;成功0&#xff0c;失-1&…...

深度与视差的关系及其转换

深度与视差的关系及其转换 在计算机视觉和立体视觉中&#xff0c;深度和视差是两个重要的概念。理解这两者之间的关系对于实现立体图像处理、三维重建以及深度估计至关重要。在这篇博客中&#xff0c;我们将深入探讨深度和视差的概念&#xff0c;并介绍它们之间的转换关系。 …...

Unity全局光照详解

之前就学过但是太久没用又忘了&#xff0c;因此用最简洁易懂的语言做个记录。 全局光照分为两个系统&#xff0c;分别是实时光照和混合光照。&#xff08;点击window/Rendering/Lighing打开此面板&#xff09; 其中全局光照对于我来说都是新技术了&#xff0c;上一次学…...

外观模式的理解和实践

外观模式&#xff08;Facade Pattern&#xff09;是一种常用的软件设计模式&#xff0c;它提供了一个统一的接口&#xff0c;用来访问子系统中的一群接口。该模式定义了一个高层的接口&#xff0c;使得子系统更容易使用。简单来说&#xff0c;外观模式就是通过引入一个外观角色…...

【前端知识】Javascript进阶-类和继承

文章目录 概述一、类&#xff08;Class&#xff09;二、继承&#xff08;Inheritance&#xff09; 三、继承的实现方式作用一、类和作用二、继承和作用 概述 当然可以&#xff0c;以下是对JavaScript中类和继承的详细介绍&#xff1a; 一、类&#xff08;Class&#xff09; 定…...

Kylin麒麟操作系统 | Nginx服务部署

目录 一、理论储备1. Nginx概述2. Nginx与Apache的区别3. Nginx的服务配置 二、任务实施任务1 Nginx的编译安装1. Server配置2. 客户端测试 任务2 Nginx反向代理1. Server1配置2. Server2配置3. 客户端测试 一、理论储备 1. Nginx概述 Nginx是一个轻量级的web服务器&#xff…...

51单片机--- 串口控制仿真

51单片机--- 串口控制仿真 实验目标:51单片机接收串口数据,根据数据点亮LED。 实验步骤: 在Proteus里画出原理图 在Keil里用C语言编写程序 在Proteus中导入HEX文件,启动仿真 实验协议: 波特率115200 数据位:8位,停止位:1位,校验位:无。 命令格式: 一条命令为…...

<数据集>输电线塔杂物识别数据集<目标检测>

数据集下载链接 &#xff1c;数据集&#xff1e;输电线塔杂物识别数据集&#xff1c;目标检测&#xff1e;https://download.csdn.net/download/qq_53332949/90141102数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;1099张 标注数量(xml文件个数)&#xff1a;1099 …...

HarmonyOS学习 --- Mac电脑获取手机UDID

一&#xff0c;手机打开开发者选项 1&#xff0c;打开“设置 > 关于本机”&#xff0c;连续点击7次版本号&#xff0c;打开开发者选项。 2&#xff0c;打开“USB调试”。 二&#xff0c;配置环境变量 获取OpenHarmony SDK 安装路径 /Users/admin/Library/OpenHarmony/Sdk/10…...

OpenIPC开源FPV之Adaptive-Link地面站代码解析

OpenIPC开源FPV之Adaptive-Link地面站代码解析 1. 源由2. 框架代码3. 软件配置3.1 默认配置3.2 加载配置3.3 更新配置 4. 通信例程4.1 TCP报文解析4.2 UDP报文发送 5. 特殊指令5.1 request_keyframe5.2 drop_gop5.3 resume_adaptive5.4 pause_adaptive 6. 总结7. 参考资料 1. 源…...

Linux Docker环境中解决中文字体乱码问题完整指南

问题背景 在Linux Docker环境中运行涉及中文显示的应用时&#xff08;如Selenium网页截图、PDF生成等&#xff09;&#xff0c;经常会遇到中文显示为方块或乱码的问题。这是因为Linux系统默认没有安装中文字体所导致的。 解决方案 我们可以从Windows系统复制常用中文字体到D…...

[数据结构#1] 并查集 | FindRoot | Union | 优化 | 应用

目录 1. 并查集原理 问题背景 名称与编号映射 数据结构设计 2. 并查集基本操作 (1) 初始化 (2) 查询根节点 (FindRoot) (3) 合并集合 (Union) (4) 集合操作总结 并查集优化 (1) 路径压缩 (2) 按秩合并 3. 并查集的应用 (1) 统计省份数量 (2) 判断等式方程是否成…...

用于卫星影像间接RPC模型精化的通用光束法平差方法

引言 介绍了通用RPC模型的表达式&#xff0c;which has been down to death 描述了RPC模型产生误差的原因——主要与定义传感器方位的姿态角有关。 每个影像都会对应一个三维点云&#xff0c;但是对同一地物拍摄的不同影像对应出来的三维点云是不一样的&#xff0c;所以才需…...

关于Redis主从复制实验操作

需要搭建帮助的可以去taobao搜索Easy Company技术服务&#xff0c;谢谢&#xff01;&#xff01;&#xff01; 需要搭建帮助的可以去taobao搜索Easy Company技术服务&#xff0c;谢谢&#xff01;&#xff01;&#xff01; Redis主从复制需要一主二从&#xff08;共三个Redis…...

【HarmonyOS】鸿蒙获取appIdentifier,Identifier

【HarmonyOS】鸿蒙获取appIdentifier&#xff0c;Identifier 一、前言 三方后台需要填写的所谓appIdentifier&#xff0c;Identifier信息&#xff0c;其实对应鸿蒙应用的appID。 二、解决方案&#xff1a; 注意&#xff0c;模拟器获取data.signatureInfo.appIndentifer为空…...

matplotlib(二)

目录 1、折线图&#xff08;plot&#xff09;与基础绘制图功能 1.1、设置图形风格 2、多坐标系显示图像 3、折线图的应用场景 1、折线图&#xff08;plot&#xff09;与基础绘制图功能 # import matplotlib.pyplot as plt # import random # #1.创建画布 # plt.figure(figs…...

Jenkins容器使用宿主机Docker(五)

DevOps之安装和配置 Jenkins (一) DevOps 之 CI/CD入门操作 (二) Sonar Qube介绍和安装&#xff08;三&#xff09; Harbor镜像仓库介绍&安装 &#xff08;四&#xff09; Jenkins容器使用宿主机Docker&#xff08;五&#xff09; Jenkins流水线初体验&#xff08;六&#…...

基于前后端分离的食堂采购系统源码:从设计到开发的全流程详解

本篇文章&#xff0c;笔者将从系统设计到开发的全过程进行详解&#xff0c;帮助开发者和企业了解如何高效构建一套完善的食堂采购系统。 一、系统需求分析 在开发一套基于前后端分离的食堂采购系统前&#xff0c;必须对业务需求和功能模块进行详细分析&#xff0c;确保系统设…...

git使用教程(超详细)-透彻理解git

一.核心基础 核心概念有六个 首先请把与svn有关的一切概念暂时从你的脑海中移除掉&#xff0c;我们要重新认识本文所讲述的所有概念。 1.worktree worktree是一个目录&#xff0c;你在这里对文件进行增加、删除、修改。也就是我们常说的工作区。在git中worktree必须要与一个…...

Bugku---misc---隐写2

题目出处&#xff1a;首页 - Bugku CTF平台 ✨打开发现是一张图片&#xff0c;于是查看属性&#xff0c;放在010查看&#xff0c;这都是基本步骤了&#xff0c;发现里面有一个flag.rar&#xff01;&#xff01;&#xff01;拿binwalk分析也确实存在 ✨于是按照压缩包的起始位置…...

数据仓库工具箱—读书笔记01(数据仓库、商业智能及维度建模初步)

数据仓库、商业智能及维度建模初步 记录一下读《数据仓库工具箱》时的思考&#xff0c;摘录一些书中关于维度建模比较重要的思想与大家分享&#x1f923;&#x1f923;&#x1f923; 博主在这里先把这本书"变薄"~有时间的小伙伴可以亲自再读一读&#xff0c;感受一下…...

将 Ubuntu 22.04 LTS 升级到 24.04 LTS

Ubuntu 24.04 LTS 将支持 Ubuntu 桌面、Ubuntu 服务器和 Ubuntu Core 5 年&#xff0c;直到 2029 年 4 月。 本文将介绍如何将当前 Ubuntu 22.04 系统升级到最新 Ubuntu 24.04 LTS版本。 备份个人数据 以防万一&#xff0c;把系统中的重要数据自己备份一下~ 安装配置SSH访问…...

Springboot3.x配置类(Configuration)和单元测试

配置类在Spring Boot框架中扮演着关键角色&#xff0c;它使开发者能够利用Java代码定义Bean、设定属性及调整其他Spring相关设置&#xff0c;取代了早期版本中依赖的XML配置文件。 集中化管理&#xff1a;借助Configuration注解&#xff0c;Spring Boot让用户能在一个或几个配…...

Python:类方法、实例方法与静态方法深度解析(补)

目录 一.实例变量 二.类变量 三.实例方法 四.类方法 五.静态方法 六.小结 总结 今天看程序时&#xff0c;发现自己好像忘了这三者的区别&#xff0c;所以重新写了一篇深度解析&#xff0c;希望之前看博客没看懂的小伙伴可以通过这个博客分清楚这三个方法。跟的是麦叔的课…...

Certimate:简化 SSL 证书管理的开源工具

引言 SSL(Secure Sockets Layer)证书对于保护网站和用户数据至关重要。然而,管理多个 SSL 证书可能变得繁琐和复杂。为了解决这个问题,Certimate 应运而生。Certimate 是一款开源的 SSL 证书管理工具,旨在简化 SSL 证书的申请、部署和续期流程。它特别适合需要管理多个域…...

rabbitMq举例

新来个技术总监&#xff0c;把 RabbitMQ 讲的那叫一个透彻&#xff0c;佩服&#xff01; 生产者 代码举例 public String sendMsg(final String exchangeName,final String routingKey,final String msg) {} /*** 发送消息* param exchangeName exchangeName* param routin…...

人工智能增强的音频和聊天协作服务

论文标题&#xff1a;AI-enabled Audio and Chat Collaboration Services 中文标题&#xff1a;人工智能增强的音频和聊天协作服务 作者信息&#xff1a; Emil P. Andersen, Norwegian Defence Research Establishment (FFI), Kjeller, NorwayJesper R. Goksr, Sindre E. Ha…...

ctr: content digest XXX not found

1、问题描述 ctr 推送镜像到本地仓库报错 ctr: content digest sha256:b96e30ccb0a1e225493e53d4f81cb2c27183406e5f902ed43c4bf15dc6f21c9c: not found 2、问题原因 本人的平台是M1&#xff0c;正常情况下载镜像会自动按平台寻找版本&#xff0c;但是由于我下载的镜像版本没…...

java内存模型

文章目录 1.java内存模型2.重排序3.内存屏障3.1四类内存屏障指令 4.happens-before4.1 规则5.volatile5.1特性5.2规则5.3 内存语义5.4 内存屏障插入策略 1.java内存模型 java内存模型&#xff08;JMM&#xff09;定义了线程和主内存之间的抽象关系&#xff1a;线程之间的共享变…...

Java Object类与Objects类

1. Object 类 (1) Object类是Java中所有类的祖宗类&#xff0c;因此&#xff0c;Java中所有类的对象都可以直接使用Object类中提供的一些方法(public class Object)。 . (2) Object类常见方法 方法说明public String toString()返回对象的字符串形式public boolean eq…...

【目标检查】YOLO系列之:Triton 推理服务器Ultralytics YOLO11

Triton 推理服务器 1、引言2、Triton服务器2.1 什么是Triton Inference Server2.2 将YOLO11 导出为ONNX 格式2.3 设置Triton 模型库2.3.1 创建目录结构2.3.2 将导出的ONNX 模型移至Triton 资源库 2.4 运行Triton 推断服务器2.4.1 使用 Docker 运行Triton Inference Server2.4.2…...

力扣69. x 的平方根

给你一个非负整数 x &#xff0c;计算并返回 x 的 算术平方根 。 由于返回类型是整数&#xff0c;结果只保留 整数部分 &#xff0c;小数部分将被 舍去 。 注意&#xff1a;不允许使用任何内置指数函数和算符&#xff0c;例如 pow(x, 0.5) 或者 x ** 0.5 。 示例 1&#xff1a;…...

关于目标检测YOLO 各版本区别v1-v11/vX/vR

概述 YOLO&#xff08;You Only Look Once&#xff0c;你只看一次&#xff09;是一系列开创性的实时目标检测模型&#xff0c;它们彻底改变了计算机视觉领域。由Joseph Redmon开发&#xff0c;后续版本由不同研究人员迭代&#xff0c;YOLO模型以其在图像中检测对象的高速度和准…...

求成绩的平均值,统计低于平均分的人数

【问题描述】编写函数double average(double score[ ], int n,int *m)对存放在实型数组中考试成绩进行求平均分和低于平均分的人数&#xff0c;要求在主函数里面进行班级人数和成绩的输入&#xff0c;调用average函数进行计算成绩平均值和低于平均分的人数后&#xff0c;返回主…...

SGD、BGD、MBGD 之间的区别

文章目录 SGD&#xff08;Stochastic Gradient Descent&#xff0c;随机梯度下降&#xff09;BGD&#xff08;Batch Gradient Descent&#xff0c;批量梯度下降&#xff09;MBGD&#xff08;Mini-Batch Gradient Descent&#xff0c;小批量梯度下降&#xff09; 前置&#xff1…...

Android -- WebView之loadData加载html字符串显示网页

目录 前言1. loadUrl 加载网页地址2. loadData 加载Html字符来显示网页3. loadDataWithBaseURL4. 总结 前言 最近在给一个老项目做64位so文件的适配&#xff0c;当应用发布到应用市场上后&#xff0c;用户反馈64位手机上的网页加载不出内容&#xff0c;但32位的手机上是正常…...

单片机:实现数码管00盗99显示(附带源码)

单片机实现数码管00到99显示 在嵌入式开发中&#xff0c;数码管是最常用的显示设备之一&#xff0c;特别适合用于显示数字信息。本项目的目标是利用8051单片机控制数码管实现数字显示&#xff0c;从00到99的循环显示。我们将通过按键或定时器来控制数字的增减&#xff0c;并通…...

大厂面试智力题大全(详细解题思路,持续更新)

目录 八个球有一个比较重,问称几次可以把较重的球拎出来,具体称重的方法是怎样的? 64 匹马 8 个赛道,找出前四名,最少赛多少场(腾讯) 一个城市的加油站数量 5L的水桶和3L的水桶怎么量出4L的水 有一堆粗细不均匀的绳子,燃烧完一个绳子需要2小时,如何用这些绳子凑出…...

使用 acme.sh 签发和自动续期 ssl https 证书

acme.sh 是一个热度非常高的签发和自动续期 https 证书的工具&#xff0c;虽然官网上提供了充分的操作说明&#xff0c;但是不够简洁&#xff0c;本文以在 nginx 中签发和配置http 为例&#xff0c;列出必要的几个简单步骤。 安装 因为网络原因&#xff0c;github 大部分人是…...

YOLOv9改进,YOLOv9引入DLKA-Attention可变形大核注意力,WACV2024,二次创新RepNCSPELAN4结构

摘要 作者引入了一种称为可变形大核注意力 (D-LKA Attention) 的新方法来增强医学图像分割。这种方法使用大型卷积内核有效地捕获体积上下文,避免了过多的计算需求。D-LKA Attention 还受益于可变形卷积,以适应不同的数据模式。 理论介绍 大核卷积(Large Kernel Convolu…...

docker安装mysql8

上一篇提到了docker安装mysql5.7和mysql8有所不同&#xff0c;这一篇说一下mysql8的安装 1、宿主机创建映射目录 mkdir -p /data/mysql8/log mkdir -p /data/mysql8/data mkdir -p /data/mysql8/conf这里我放在了/data/mysql8目录下 2、拉取mysql镜像 docker pull mysql:8.…...

【云原生知识】Kubernets实践-前端服务如何访问后端服务

文章目录 概述步骤1&#xff1a;部署后端服务步骤2&#xff1a;配置Nginx步骤3&#xff1a;创建Nginx服务总结 如何确保 Nginx 能持续访问后端服务&#xff1f;相关文献 概述 假设你正在使用Kubernetes作为容器云平台&#xff0c;以下是如何配置Nginx以及相关服务&#xff0c;…...

M3DM的autodl环境构建过程笔记

文章目录 在3D-ADS环境https://blog.csdn.net/tfxzgp/article/details/144259472基础上构建(失败的记录&#xff0c;不用看)更换镜像重来&#xff08;成功&#xff09;安装缺少的包修改models.py中的RGB和点云backbone的路径修改main.py路径参数运行 在3D-ADS环境https://blog.…...

jmeter CLI Mode 传参实现动态设置用户数

一.需求 CLI 运行模式下每次运行想要传入不同的用户数&#xff0c;比如寻找瓶颈值的场景&#xff0c;需要运行多次设置不同的用户数。 二.解决思路 查看官方API Apache JMeter - Users Manual: Getting Started api CLI Mode 一节中提到可以使用如下参数做属性的替换&#…...

Mac系统下 jdk和maven 安装教程

一、jdk安装教程 1、先去官网选择对应版本下载 官网网址&#xff1a;Java SE | Oracle Technology Network | Oracle 中国 这里我选择的是jdk8的版本&#xff0c;如果你们想下载更高的版本就选择其他版本&#xff0c;目前大部分公司和教程使用jdk8的版本比较多。 点击macos&a…...

pyfink1.20版本下实现消费kafka中数据并实时计算

1、环境 JDK版本&#xff1a;1.8.0_412python版本&#xff1a;3.10.6apache-flink版本&#xff1a;1.20.0flink版本&#xff1a;1.20kafka版本&#xff1a;kafka_2.12-3.1.1flink-sql-connector-kafka版本&#xff1a;3.3.0-1.202、执行python-flink脚本 从kafka的demo获取消…...

【经验分享】私有云运维的知识点

最近忙于备考没关注&#xff0c;有次点进某小黄鱼发现首页出现了我的笔记还被人收费了 虽然我也卖了一些资源&#xff0c;但我以交流、交换为主&#xff0c;笔记都是免费给别人看的 由于当时刚刚接触写的并不成熟&#xff0c;为了避免更多人花没必要的钱&#xff0c;所以决定公…...