事件监听的艺术:掌握`addEventListener`的魅力

在这里插入图片描述

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

  • 一、引言
    • 介绍`addEventListener`的基本概况。
  • 二、 `addEventListener`的基本概念
    • 解释`addEventListener`的作用。
  • 三、 `addEventListener`的语法
    • 详细介绍`addEventListener`的语法。
    • 提供示例代码,展示如何使用`addEventListener`监听不同类型的事件。

一、引言

介绍addEventListener的基本概况。

addEventListener 是 JavaScript 中的一个重要方法,它允许用户在特定事件发生时执行自定义的回调函数

以下是 addEventListener 的基本概念、语法和常见事件类型的介绍。

一、基本概念

  1. addEventListener 用于向事件目标添加事件监听器。
  2. 事件监听器是一个回调函数,当事件发生时,该函数将被调用。
  3. 事件目标是指可以触发事件的 HTML 元素或 JavaScript 对象。

二、语法

addEventListener(eventType, listener, useCapture)

  1. eventType:事件类型,如 “click”、“keydown”、“mousemove” 等。
  2. listener:事件发生时执行的回调函数。
  3. useCapture:布尔值,表示是否使用事件捕获。事件捕获是指在事件冒泡阶段触发时执行的监听器。默认值为 false,表示使用事件冒泡。

三、常见事件类型

  1. “click”:当用户点击元素时触发。
  2. “keydown”:当用户按下键盘上的键时触发。
  3. “mousemove”:当用户在元素上移动鼠标时触发。
  4. “scroll”:当用户在页面滚动时触发。
  5. “focus”:当元素获得焦点时触发。
  6. “blur”:当元素失去焦点时触发。

在这里插入图片描述

四、应用场景

addEventListener 在各种场景下都有广泛应用,以下是其中一些:

  1. 表单验证:当用户在表单中输入内容时,可以使用 addEventListener 监听 “input” 事件,并在事件处理函数中验证输入值。
  2. 页面滚动:使用 addEventListener 监听 “scroll” 事件,可以实现页面滚动时加载更多内容的功能。
  3. 窗口大小调整:使用 addEventListener 监听 “resize” 事件,可以实现窗口大小调整时调整页面布局的功能。
  4. 键盘事件:使用 addEventListener 监听 “keydown” 事件,可以实现键盘快捷键的功能。
  5. 鼠标事件:使用 addEventListener 监听 “mousemove”、“mouseover”、“mouseout” 等事件,可以实现鼠标悬停、鼠标移入移出等功能。

在这里插入图片描述

总之,addEventListener 是一个强大且灵活的方法,可以用于监听各种类型的事件,从而实现丰富的交互功能。

二、 addEventListener的基本概念

解释addEventListener的作用。

addEventListener 是 JavaScript 中的一个方法,它允许开发者向事件目标添加事件监听器。事件监听器是一个回调函数,当事件发生时,该函数将被调用。事件目标是指可以触发事件的 HTML 元素或 JavaScript 对象。

addEventListener 的作用主要可以概括为以下几点:

  1. 添加事件监听器:addEventListener 方法允许开发者向事件目标添加事件监听器,以便在事件发生时执行相应的操作。
  2. 监听事件类型:addEventListener 方法接受两个参数,第一个参数表示要监听的事件类型,如 “click”、“keydown”、“mousemove” 等。
  3. 设置事件处理函数:第二个参数是一个回调函数,当事件发生时,该函数将被调用,执行相应的操作。
  4. 设置事件捕获:addEventListener 方法第三个参数是一个布尔值,表示是否使用事件捕获。事件捕获是指在事件冒泡阶段触发时执行的监听器。默认值为 false,表示使用事件冒泡。

addEventListener 的应用场景非常广泛,如表单验证、页面滚动、窗口大小调整、键盘事件、鼠标事件等。通过使用 addEventListener,开发者可以实现丰富的交互功能,提高用户体验。

三、 addEventListener的语法

详细介绍addEventListener的语法。

addEventListener 是 JavaScript 中的一个方法,用于向事件目标添加事件监听器。事件监听器是一个回调函数,当事件发生时,该函数将被调用。事件目标是指可以触发事件的 HTML 元素或 JavaScript 对象。

addEventListener 的语法如下:

element.addEventListener(eventType, listener, useCapture);

其中,element 表示事件目标,可以是 HTML 元素或 JavaScript 对象;eventType 表示要监听的事件类型,如 “click”、“keydown”、“mousemove” 等;listener 表示事件发生时执行的回调函数;useCapture 表示是否使用事件捕获,默认值为 false,表示使用事件冒泡。

下面是一个具体的例子,演示如何向一个按钮添加一个点击事件监听器:

// 获取按钮元素
var button = document.getElementById("myButton");// 定义事件处理函数
function handleClick() {alert("按钮被点击了!");
}// 向按钮添加点击事件监听器
button.addEventListener("click", handleClick, false);

在这个例子中,我们首先获取了 id 为 “myButton” 的按钮元素,然后定义了一个名为 handleClick 的函数,用于处理按钮被点击的事件。接着,我们使用 addEventListener 方法向按钮添加了一个点击事件监听器,第三个参数 false 表示我们不想使用事件捕获,而是使用事件冒泡。

当用户点击按钮时,handleClick 函数将被调用,弹出一个警告框提示 “按钮被点击了!”。

提供示例代码,展示如何使用addEventListener监听不同类型的事件。

下面是一些使用 addEventListener 监听不同类型事件的示例代码:

  1. 监听点击事件:
// 获取按钮元素
var button = document.getElementById("myButton");// 定义事件处理函数
function handleClick() {alert("按钮被点击了!");
}// 向按钮添加点击事件监听器
button.addEventListener("click", handleClick, false);
  1. 监听键盘事件:
// 获取输入框元素
var input = document.getElementById("myInput");// 定义事件处理函数
function handleKeyDown(event) {if (event.key === "Enter") {alert("用户按下 Enter 键!");}
}// 向输入框添加键盘事件监听器
input.addEventListener("keydown", handleKeyDown, false);
  1. 监听鼠标事件:
// 获取图像元素
var image = document.getElementById("myImage");// 定义事件处理函数
function handleMouseMove(event) {if (event.buttons === 1) { // 左键image.style.left = event.clientX + "px";image.style.top = event.clientY + "px";}
}// 向图像添加鼠标事件监听器
image.addEventListener("mousemove", handleMouseMove, false);
  1. 监听窗口大小调整事件:
// 获取窗口对象
var window = window;// 定义事件处理函数
function handleResize(event) {alert("窗口大小已调整!");
}// 向窗口添加窗口大小调整事件监听器
window.addEventListener("resize", handleResize, false);

这些示例代码展示了如何使用 addEventListener 监听不同类型的事件,并根据事件类型执行相应的处理函数。

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

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

相关文章

实现前端指纹登录的简单示例

随笔 一切的失败都来源于实力不足 引入 如今的指纹识别已经充分运用到平板、笔记本电脑、手机甚至在用户支付中也是大有造诣,所以指纹作为我们用户独属于自己的身份识别信号也是相当重要的,正是这种独特的身份信号保存着我们的隐私信息 在现代网页应…

【Vulnhub 靶场】【IA: Keyring (1.0.1)】【中等】【20210730】

1、环境介绍 靶场介绍:https://www.vulnhub.com/entry/ia-keyring-101,718/ 靶场下载:https://download.vulnhub.com/ia/keyring-v1.01.ova 靶场难度:中等 发布日期:2021年07月30日 文件大小:1.1 GB 靶场作者&#xf…

基于Mamdani模糊神经网络的调速控制系统simulink建模与仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 模糊神经网络控制器概述 4.2 模糊神经网络控制器基本原理 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ............................…

Linux与常用的Linux命令

Linux概念 Linux 是一种免费使用和自由传播的类 UNIX 操作系统。它的内核最初是由芬兰计算机科学家林纳斯本纳第克特托瓦兹(Linus Benedict Torvalds)在 1991 年发布,并持续发展至今。Linux 的设计灵感来源于 MINIX 和 Unix 系统&#xff0c…

UE5 项目设置

1、定义设置哪些参数 UCLASS(configEngine, globaluserconfig) class ADVMOD_API UGlobalSettings : public UObject {GENERATED_BODY()public:UGlobalSettings();const FString& GetPythonExePath() const { return PythonExePath.FilePath; }private:UPROPERTY(config, E…

【SpringBoot零基础入门到项目实战①】解锁现代Java开发之门:深度探究Spring Boot的背景、目标及选择理由

文章目录 引言Spring Boot的背景和目标背景目标 为什么选择Spring Boot1. 简化配置2. 内嵌式容器3. 生态系统支持4. 大量的Starter5. 广泛的社区支持6. 适用于微服务架构7. 丰富的扩展机制 实例演示创建一个简单的Spring Boot应用 拓展与深入学习1. Spring Boot Actuator2. Spr…

程序设计原则

▶1.程序设计的基本原则 程序设计中哪些因素很重要,不同专家有不同看法,专家们都有直己独到的见解。有人认为程序的清晰性很重要;有人认为程序的执行效率要优先考虑;有人认为程序的正确性是头等大事:有些人认为这些都…

EtherCAT主站SOEM -- 10 -- SOEM之基于QT搭建自己的EtherCAT主站

EtherCAT主站SOEM -- 2 -- SOEM之ethercatbase.h/c文件解析 0 QT-SOEM视频预览:一 SOEM主站解析:1.1 调用ec_init(eth0) 函数:1.1.1 执行到 nicdrv.c 文件 (网络接口卡(NIC)驱动程序)1.1.1.1 ecx_setupnic函数1.1.1.2 ecx_setupnic函数解析1.1.1.3 ec_setupheader(void …

word如何快速制作简易代码块

先上解决方案。 方式一(全自动): typora编辑,导出选择word文档即可。内网环境,故放弃。 方式二(全手动): 在修改文档时,左侧会有“段落布局”按钮,点击该按…

力扣刷题-二叉树-路径总和

112 路径总和 给定一个二叉树和一个目标和,判断该树中是否存在根节点到叶子节点的路径,这条路径上所有节点值相加等于目标和。 说明: 叶子节点是指没有子节点的节点。 示例: 给定如下二叉树,以及目标和 sum 22, 返回 true, 因为…

记录 | Visual Studio报错:const char*类型的值不能用于初始化char*类型

Visual Studio 报错: const char *”类型的值不能用于初始化“char *”类型的实体错误 解决办法: 1,强制类型转换,例如: char * Singer::pv[] {(char*)"other", (char*)"alto", (char*)"c…

arp协议

arp协议 ARP协议简介 在探讨计算机网络的复杂世界时,我们不可避免地会遇到地址解析协议(ARP)。ARP协议扮演着一个关键角色,它允许网络设备在发送数据时确定目标设备的物理地址,即媒体访问控制(MAC&#x…

Linux常见面试题30题详细答案解析(三)

1. 如何使用Linux中的系统日志进行故障排查和问题诊断? Linux中的系统日志记录了系统运行过程中的各种事件和错误信息。通过查看和分析系统日志,可以帮助管理员进行故障排查和问题诊断。了解如何查看和使用系统日志,可以提高故障排查和问题解…

1848_emacs_org-mode代码块环境

Grey 全部学习内容汇总: https://github.com/greyzhang/g_org 1848_emacs_org-mode代码块环境 这一部分主要是涉及到一些代码的执行、引用以及输出处理等功能。从之前我看的资料来说,更加偏重于可重现研究但不一定是文学式编程的必要部分。 内容来源…

git 上传大文件操作 lfs 的使用

我们要先去下载 下载后安装 我最后还是下载到了D:\git\Git\bin这个目录下 如何检查是否下载成功呢,用 git lfs install 在命令行运行就可以查看 下面怎么上传文件呢 首先我们还是要初始化文件的 git init 下一步输入命令 git lfs install 下一步 git lfs tra…

【小程序】-【

swiper、swiper-item轮播图 swiper是滑块视图容器。其中只可放置swiper-item组件。部分常用属性如下&#xff0c;其余属性详见&#xff1a;官方文档 <view class"banner"><swiperprevious-margin"30rpx"circularautoplayinterval"3000&q…

EasyExcel实现⭐️本地excel数据解析并保存到数据库的脚本编写,附案例实现

目录 前言 一、 EasyExcel 简介 二、实战分析 1.Controller控制层 2. service方法和方法实现 3.EasyExcel相关类 3.1 excel表实体类 3.2 自定义监听器类 4.测试 4.1 准备工作 4.2 断点调试 5.生成脚本文件 三、分析总结 章末 小伙伴们大家好&#xff0c;最近开发的时…

Ansible-playbook编译.yml脚本

1、playbook是什么&#xff1f; 在Ansible中&#xff0c;Playbook是用于配置、部署和管理被控节点的剧本。它由一个或多个play&#xff08;角色&#xff09;组成&#xff0c;每个play可以包含多个task&#xff08;台词&#xff0c;动作&#xff09;。使用Ansible的Playbook&am…

网络编程-认识套接字socket

文章目录 套接字概念端口号网络字节序 套接字类型流套接字数据报套接字 socket常见APIsocket函数bind函数listen函数accept函数connect函数sockaddr结构 套接字概念 socket套接字是进程之间一种通信机制&#xff0c;通过套接字可以在不同进程之间进行数据交流。在TCP/UDP中&…

如何开发一个prompt?prompt的使用有哪些原则?

提示词使用原则 如何开发一个跟自己预期结果接近的提示词&#xff1f;有哪些基本原则&#xff1f; 提示词迭代开发 写提示词时&#xff0c;第一次尝试是值得的&#xff0c;反复完善提示&#xff0c;获得越来越接近你想要的结果 原文来源于B站吴恩达提示工程教学公开课。…