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

ops/2024/12/17 23:21:19/

起因


        首先,之前留给我们的一点东西,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>

结尾

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


http://www.ppmy.cn/ops/142751.html

相关文章

uniapp使用百度地图配置了key,但是显示Map key not configured

搞了我两天的一个问题。 hbuilderx版本&#xff1a;4.36 问题介绍&#xff1a; 我的项目是公司的项目&#xff0c;需要在H5端使用百度地图&#xff0c;使用vue-cli创建的uniapp&#xff0c;就是uni代码在src里的目录结构。就是使用这种方式才会遇到这个问题。 问题原因&#xf…

数据结构开始——时间复杂度和空间复杂度知识点笔记总结

好了&#xff0c;经过了漫长的时间学习c语言语法知识&#xff0c;现在我们到了数据结构的学习。 首先&#xff0c;我们得思考一下 什么是数据结构&#xff1f; 数据结构(Data Structure)是计算机存储、组织数据的方式&#xff0c;指相互之间存在一种或多种特定关系的数据元素…

快速本地化部署 OnlyOffice服务 ( Linux+Docker)

文章目录 一、OnlyOffice介绍&#x1f4d6;二、集成OnlyOffice&#x1f9e9;2.1 环境准备&#x1f5a5;️2.2 搜索镜像2.3 拉取镜像2.4 查看镜像2.5 创建容器2.6 进入容器配置2.7 重启服务2.8 添加字体字号2.9 测试OnlyOffice服务 三、在线预览office文档四、Cpolar内网穿透 一…

突破时间与空间限制的富媒体百宝箱——智能工具箱:让云上内容生产更easy

“这是你的同款日常吗&#xff1f;老是在赶deadline&#xff0c;苦练PS还未出师&#xff0c;premiere、达芬奇真的好难&#xff0c;学python脑容量确实不够~打工人太难了~~” 来试试智能工具箱吧&#xff01;即来即用&#xff0c;一键实现办公自由。图片工具、视频工具、音频工…

【Elasticsearch】关键数据类型

🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/?__c=1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,精通Java编程,高并发设计,Springboot和微服务,熟悉Linux,ESXI虚拟化以及云原生Docker和K8s,热衷于探…

video2x - 视频和图像无损放大工具

video2x集成了多种超分辨率算法&#xff08;如 Waifu2x、Anime4K、Real-ESRGAN&#xff09;&#xff0c;能够有效提高视频和图像的分辨率&#xff0c;并提供了图形界面&#xff08;GUI&#xff09;、Docker 和命令行界面&#xff08;CLI&#xff09;的使用方式。 9500 Stars 94…

Reactor 响应式编程(第三篇:R2DBC)

系列文章目录 Reactor 响应式编程&#xff08;第一篇&#xff1a;Reactor核心&#xff09; Reactor 响应式编程&#xff08;第二篇&#xff1a;Spring Webflux&#xff09; Reactor 响应式编程&#xff08;第三篇&#xff1a;R2DBC&#xff09; Reactor 响应式编程&#xff08…

静态socks5代理ip 帮助您找到最合适的ip代理服务

在网络安全这片暗流涌动的海域&#xff0c;隐匿性成为了航行者的必备技能。静态Socks5代理IP&#xff0c;就像一艘装备精良的潜艇&#xff0c;能够悄无声息地穿梭于信息的深海。但要驾驭这艘潜艇&#xff0c;探寻其隐匿性的极致&#xff0c;则需洞悉其关键特征&#xff1a;无迹…