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

前端面试:【事件处理】探索事件流、委托与事件对象

嗨,亲爱的事件探险家!在JavaScript的世界中,事件处理是与用户互动的关键。本文将带你探索事件流、事件委托、常见事件类型和事件对象,这些知识将帮助你成为事件处理的大师。

2. 事件流:事件的旅程

事件流描述了事件从发生到被处理的过程。它分为冒泡阶段(从目标元素向上冒泡至根元素)和捕获阶段(从根元素向下捕获至目标元素)。你可以使用addEventListener来指定事件在哪个阶段触发。

3. 事件委托:优化事件处理

事件委托是一种优化事件处理的技巧,它利用事件冒泡将事件处理程序绑定到父元素,而不是每个子元素。这样可以减少内存占用和简化代码,特别适用于大型列表或动态生成的内容。

// 事件委托示例
const parentElement = document.getElementById('parent');
parentElement.addEventListener('click', function(event) {if (event.target.tagName === 'BUTTON') {// 处理按钮点击事件event.target.textContent = '已点击';}
});

4. 常见事件类型:互动多姿多彩

JavaScript支持各种事件类型,其中一些常见的包括:

  • click:鼠标点击事件。
  • keydown:键盘按下事件。
  • submit:表单提交事件。
  • mouseovermouseout:鼠标悬停和移出事件。
  • change:输入框内容变化事件。

你可以根据需要选择适合的事件类型,并为其添加相应的事件处理程序。

5. 事件对象:事件的信使

事件对象是包含有关事件的信息的对象。它提供了事件的类型、目标元素、鼠标位置等信息。你可以在事件处理程序中使用事件对象来获取有关事件的详细信息。

// 获取鼠标坐标
document.addEventListener('mousemove', function(event) {const x = event.clientX;const y = event.clientY;console.log(`鼠标位置:X ${x}, Y ${y}`);
});

6. 阻止默认行为和冒泡:事件的掌控者

有时候,你可能需要阻止事件的默认行为,比如阻止表单提交或链接的跳转。你还可以停止事件的冒泡,防止它继续传播到父元素。

// 阻止表单提交
document.getElementById('myForm').addEventListener('submit', function(event) {event.preventDefault();// 执行自定义逻辑
});// 阻止事件冒泡
document.getElementById('myButton').addEventListener('click', function(event) {event.stopPropagation();// 阻止事件传播到父元素
});

7. 生活中的小例子

想象一下,你是一名交通指挥官,你需要掌控交通信号灯。红灯表示停止,绿灯表示前进,黄灯表示准备停止。每个信号灯的颜色变化都对应一个事件,你需要相应地控制交通流。

8. 注意事项

事件处理是JavaScript中重要的一部分,但要小心不要滥用它。过多的事件处理器可能导致代码难以维护。同时,了解事件流和事件对象是编写高效和精确事件处理代码的关键。

亲爱的事件探险家,现在你已经了解了事件流、事件委托、常见事件类型和事件对象,你已经掌握了探索和掌控用户互动的技能。开始你的事件处理冒险吧,成为事件的大师!

相关文章:

前端面试:【事件处理】探索事件流、委托与事件对象

嗨,亲爱的事件探险家!在JavaScript的世界中,事件处理是与用户互动的关键。本文将带你探索事件流、事件委托、常见事件类型和事件对象,这些知识将帮助你成为事件处理的大师。 2. 事件流:事件的旅程 事件流描述了事件从…...

c语言函数指针使用例子

一、是什么? c语言函数名是一段代码首地址,连接器链接时放在text段,下面例子会把函数名打印出来,.map文件内存分布查看相关代码段函数: 下面例子实现步骤: 来源于uboot 的初始化 board_f.c typedef int (*init_fun_t)(void); (1)构建gd数据类型 (2)初始化全局gd变量 (3)实…...

云计算技术应用专业实训室建设方案

一、 云计算技术应用系统概述 云计算技术是一种基于互联网的计算模式,通过将计算资源(如服务器、存储、数据库、网络、软件等)提供为一种服务,使用户能够按需获取和使用这些资源,而无需拥有和管理实际的物理设备。云计…...

C语言学习之共用体(union)的运用

C语言中的共用体:伪代码表示: union 类型名{ 数据类型1 成员1; 数据类型2 成员2; 数据类型3 成员3; . . . 数据类型n 成员n; };共用体的特点:1.所有的成员是共享同一块内存空间的2.所有成员的首地址是一样的;3.大小取决于共用体中…...

Sentinel 控制台(集群流控管理)

规则配置 要通过 Sentinel 控制台配置集群流控规则&#xff0c;需要对控制台进行改造。我们提供了相应的接口进行适配。 从 Sentinel 1.4.0 开始&#xff0c;我们抽取出了接口用于向远程配置中心推送规则以及拉取规则&#xff1a; DynamicRuleProvider<T>: 拉取规则Dy…...

PMP P-08 Communication Management

...

matlab中判断数据的奇偶性(mod函数、rem函数)

用Matlab判断一个数是偶数还是奇数 1、mod函数 X 25;%要判断的数 if mod(X,2)1disp(奇数);%奇数 elsedisp(偶数);%偶数 end结果 2、rem函数 n25; if rem(n,2)0display(偶数); elsedisplay(奇数); end结果...

Redis使用

环境配置 代码实现 Java public CoursePublish getCoursePublishCache(Long courseId){//查询缓存Object jsonObj redisTemplate.opsForValue().get("course:" courseId);if(jsonObj!null){String jsonString jsonObj.toString();System.out.println("从缓…...

#systemverilog# 之 event region 和 timeslot 仿真调度(七)Active/NBA 咋跳转的?

目录 一 目的 二 案例分析 2.1 先Active域,后 NBA 域 2.2 先Active域,后 NBA 域,后NBA域...

回归预测 | MATLAB实现SSA-ELM麻雀搜索算法优化极限学习机多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现SSA-ELM麻雀搜索算法优化极限学习机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现SSA-ELM麻雀搜索算法优化极限学习机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果一览基…...

LION AI 大模型落地,首搭星纪元 ES

自新能源汽车蓬勃发展以来&#xff0c;随着潮流不断进步和变革的“四大件”有着明显变化。其中有&#xff1a;平台、智能驾驶、配置、以及车机。方方面面都有着不同程度的革新。 而车机方面&#xff0c;从以前老旧的媒体机、 CD 机发展至如今具有拓展性、开放性、智能化的车机…...

【AC-自动机】- 字符串的逆序

链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 题号&#xff1a;NC14310 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 32768K&#xff0c;其他语言65536K 64bit IO Format: %lld 题目描述 输入一个字符串…...

统计Mysql库中每个表的总行数,解决table_rows不准确问题

1、拼接SQL selectsubstring( GROUP_CONCAT(a.sf SEPARATOR ),1,length(GROUP_CONCAT(a.sf SEPARATOR ))-10) as sql_str from( select concat(select ", TABLE_name , ", count(*) as row_num from , TABLE_SCHEMA, .,TABLE_name, union all ) as sf frominformat…...

AWS EC2 docker-compose部署MongoDB4.2

环境准备 安装docker 参考EC2官方文档&#xff1a;创建容器镜像以在 Amazon ECS 上使用 - Amazon Elastic Container Service sudo yum update -y sudo amazon-linux-extras install docker sudo usermod -a -G docker ec2-user sudo systemctl enable docker sudo systemct…...

IDEA常用插件之类Jar包搜索Maven Search

文章目录 IDEA常用插件之类Jar包搜索Maven Search说明安装插件使用方法1.搜索自己要搜的jar包2.根据类名搜索 IDEA常用插件之类Jar包搜索Maven Search 说明 它可以帮助用户快速查找和浏览Maven中央存储库中可用的依赖项和插件。它可以帮助用户更方便地管理项目依赖项。 安装…...

使用proxman对iOS真机进行抓包

1 打开手机的safari 输入地址 http://proxy.man/ssl 2 下载证书代开设置页面&#xff0c;安装证书 设置信任证书 打开手机设置 &#xff0c;点击通用 点击关于本机、 点击证书信任设置 打开信任设置开关 4 设置手机代理 查看需要设置的代理地址 打开界面 在手机中按…...

sdk manager (ubuntu20.4) 安装

1、首先下载sdk manager 1.9.3 下载链接 https://www.baidu.com/link?urlVXJhUqxxhS3eFK3bOPTzi5LFl6ybeW3JwDY1CwANaPf1gvO3IxQKzY547NIe53x1blJxnAXg7FTRTvs-cnfnVa&wd&eqida22baa7b0004ca980000000664e2d426 当然要登录自己的账号才能成功下载&#xff0c;下载对应…...

Oracle修改字符集为SIMPLIFIED CHINESE_CHINA.ZHS16GBK

查询字符集 select userenv(language) from dual;修改前字符集为&#xff1a;SIMPLIFIED CHINESE_CHINA.AL32UTF8 SQL> shutdown immediate; Database closed. Database dismounted. ORACLE instance shut down. SQL> startup mount; ORACLE instance started. Total …...

函数的参数传递和返回值-PHP8知识详解

本文学习的是《php8知识详解》中的《函数的参数传递和返回值》。主要包括&#xff1a;向函数传递参数值、向函数传递参数引用、函数的返回值。 1、向函数传递参数值 函数是一段封闭的程序&#xff0c;有时候&#xff0c;程序员需要向函数传递一些数据进行操作。可以接受传入参…...

【Redis】 Redis短连接的性能优化

Redis短连接的性能优化 1. 问题 通过历史监控我们可以发现用户在频繁使用短连接的时候Redis的cpu使用率有显著的上升 2. 排查 通过扁鹊查看但是Redis的cpu运行情况如下 从扁鹊我们可以看到Redis在freeClient的时候会频繁调用listSearchKey&#xff0c;并且该函数占用了百分…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

多模态图像修复系统:基于深度学习的图片修复实现

多模态图像修复系统:基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型(Stable Diffusion Inpainting)实现图像修复功能,结合文本描述和图片输入,对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

MySQL:分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像&#xff08;比如分辨率3000*3000的图像&#xff09;的办法&#xff0c;尤其是想把内存中的裸数据&#xff08;只有图像的数据&#xff0c;不包…...