首页 > 其他分享 >为什么在js中需要添加addEventListener()?

为什么在js中需要添加addEventListener()?

时间:2024-02-18 22:45:10浏览次数:29  
标签:JavaScript js 添加 事件 监听器 addEventListener

为什么在js中需要添加addEventListener()?

1.What?

addEventListener(监听器)---EventTarget.addEventListener()方法将指定的监听器注册到 EventTarget 上,当该对象触发指定的事件时,指定的回调函数就会被执行。事件目标可以是一个文档上的元素 Element、Document 和 Window,也可以是任何支持事件的对象(比如 XMLHttpRequest)。

addEventListener() 的工作原理是将实现 EventListener 的函数或对象添加到调用它的 EventTarget 上的指定事件类型的事件侦听器列表中。如果要绑定的函数或对象已经被添加到列表中,该函数或对象不会被再次添加。

2.Why ?

  • 关注点分离:使用 addEventListener 将 HTML 结构(内容)与 JavaScript 行为(呈现)分开,使代码更清晰和易于维护。

  • 灵活性:使用 addEventListener,你可以在同一个元素上附加多个事件监听器,而不会覆盖现有的监听器。这使得处理各种场景变得更加灵活。

  • 无侵入式 JavaScript:通过以编程方式附加事件监听器,可以使 HTML 标记保持干净,不受 JavaScript 代码的干扰,提高了可读性和可访问性。

  • 动态事件处理:你可以在运行时动态地附加事件监听器,这在处理动态创建或修改的元素时特别有用。

  • 闭包支持:使用 addEventListener 附加的事件监听器可以轻松访问封闭作用域(闭包)中的变量和函数,从而更容易地管理事件处理程序内的状态和上下文。

  • 更清晰的错误处理:使用 addEventListener 可以更好地处理错误,因为事件处理代码中的错误可以更有效地被捕获和管理,而不像内联事件处理程序那样困难。

标签:JavaScript,js,添加,事件,监听器,addEventListener
From: https://www.cnblogs.com/nikiL/p/18020090

相关文章

  • 【60行代码解决】2024年最新版python爬虫有道翻译js逆向
    一、表单参数sign加密sign:c0f36866a9c650144ed5bac4eba532a7这种32位一般是MD5加密1.搜索sign:2.点击去分别在每个**sign:某某某**处打上断点结果在这个断点断住了3.原代码constu="fanyideskweb",d="webfanyi"functionj(e){returnc.a.createHash......
  • JS实现一个布隆过滤器
    之前专门聊过令牌桶算法,而类似的方案还有布隆过滤器。它一般用于高效地查找一个元素是否在一个集合中。用js实现如下所示:classBloomFilter{constructor(size,hashFunctions){this.size=size;this.bitArray=newArray(size).fill(0);thi......
  • MySQL 添加主键减少磁盘空间的使用
    测试使用的版本:MySQL8.0.32时至今日的MySQL8.3.0,默认都是不需要在定义表的时候定义主键。不过GroupReplication和PerconaXtraDBCluster(PXC)缺省不支持没有主键的表。表缺少主键会有很多负面的性能影响,最大的确定是影响复制的速度。今天,来简单说说使用主键的另一个原......
  • nvm list available 命令执行异常 Could not retrieve https://npm.taobao.org/mirror
    异常:无法连接镜像地址 解决方法在nvm的安装位置找到文件settings.txt,修改镜像地址修改前 修改后保存再次运行命令 ......
  • 亚马逊云ec2-user安装node-js-18.16.0
    1,下载vnm管理工具curl-o-https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh|bashexportNVM_DIR="$HOME/.nvm"[-s"$NVM_DIR/nvm.sh"]&&\."$NVM_DIR/nvm.sh"#Thisloadsnvm[-s"$NVM_DIR/bash......
  • ABAP:ME21N状态栏添加自定义按钮
    SE38:LMEGUICJL---->代码增强点ENHANCEMENT1Z_SEND_PO_TO_OA."activeversionIFim_fcode='OA'.DATA:ls_returnTYPEzscomm03,lv_bsartTYPEekko-bsart.DATA:lv_statusTYPEzshr0004,ls_ekkoTYPEekko.CLEARim......
  • three.js的物体点击事件
    直接粘贴无脑用 !!!vue文件执行要现在初始化方法里面调用一下onclickS(){   letraycaster=newTHREE.Raycaster();   letmouse=newTHREE.Vector2();     functiononmodelclick(event){    mouse.x=(event.clientX/window.innerWidt......
  • 【c&c++】cJSON详解
    一、JSON概述1.1JSON介绍JSON:JavaScript对象表示法(JavaScriptObjectNotation)。是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。JSON采用完全独立于语言的文本格式,但是也使用了类似C语音家族的习惯(包括C、C++、C#、Java、JavaScript、Perl、Python等)。这些特性使JSON......
  • 【总结】HTML+JS逆向混淆混合
    国外的题果然考的与众不同[secrypt_cen.html]这次是HTML网页,然后JS加密判断翻看JS代码很显然,关键的代码在checkPasswordJS混淆是必备的去混淆一条龙走起先将关键代码提取出来 JavaScript function_0x4857(_0x398c7a,_0x2b4590){const_0x104914= _0x25ec(......
  • Vue.js前端框架之vite+vue+naive前端项目模板
    1.搭建Vue示例项目npmcreatevue cdvue-demo:进入项目目录npminstall:安装所有依赖npmrundev:启动项目2.了解Vue开发和工作原理2.1package.json类似于Python项目中pyproject.toml,包含了项目名称、版本、命令、依赖、设定2.2index.html浏览器访问到的HTML文件 ......