深入理解Javascript事件处理机制

news/2024/3/28 18:49:15/文章来源:https://blog.csdn.net/qq_54334713/article/details/130357491

深入理解javascript事件处理机制

前言

在开发web应用程序时,事件处理机制是javascript中至关重要的一部分。许多高级特性,如事件冒泡、事件捕获和事件委托,都是通过事件处理来实现的。熟练掌握这些技术可以帮助我们更好地组织代码、提高代码效率并减少资源浪费

1️⃣事件捕获:

事件捕获是一种从根节点到目标节点的事件传递方式(默认)

2️⃣事件冒泡:

事件冒泡是一种从目标节点到根节点的事件传递方式

3️⃣事件流

JavaScript事件流是指当HTML页面中发生事件时,处理该事件的顺序和路径

通常情况下,事件流由三个阶段构成:捕获阶段,目标阶段和冒泡阶段

默认情况下,JavaScript事件执行顺序是:事件捕获—>目标阶段—>事件冒泡
在这里插入图片描述

4️⃣控制事件的处理

使用addEventListener()函数
用来控制事件是在事件捕获阶段还是在事件冒泡阶段响应

  • 当参数为 true 时,事件监听器将会在事件捕获阶段中执行
  • 当 参数为 false 时,事件监听器将会在事件冒泡阶段中执行

参数:

target.addEventListener(type, listener [, options]);

  • target:要添加事件的DOM节点。
  • type:要添加的事件类型,如click、keydown等。
  • listener:事件触发时要执行的函数(也称为回调函数)。可以是命名函数,也可以是匿名函数。
  • options:可以是对象,也可以是布尔值,是对象时有三个常用属性:captureoncepassive

使用 addEventListener() 函数来添加事件监听器的好处在于可以指定事件的各种特性,从而更好地控制事件的行为

案例:

 function handleClick(event) {//执行完后不再冒泡event.preventDefault();   event.stopPropagation();console.log("按钮被点击了!");}
const myButton = document.getElementById("myButton");
myButton.addEventListener("click", handleClick, {capture: false,    // true表示捕获,false表示冒泡  once: false,       // 监听器是否只调用一次,调用后自动销毁passive: false     // 监听器是否阻止默认操作或停止事件冒泡
});

5️⃣阻止冒泡和默认行为

默认行为:

例如:a标签会自动跳转了,停止了默认行为后就不会自动跳转了,就需要自行设置属性

不阻止冒泡和默认行为:

  • 事件堆积:大量事件执行
  • 延迟:大量事件执行
  • 不必要的操作:浏览器的自动操作,默认行为

案例:

const myButton = document.getElementById("myButton");
myButton.addEventListener('click', (event) => {console.log("按钮被点击了!");// 阻止事件冒泡event.stopPropagation();// 阻止默认行为event.preventDefault();//或者 return false,相当于同时执行阻止事件冒泡和默认行为,不过不建议使用
});

6️⃣避免事件泄漏

事件泄漏是指没有正确地添加或移除事件处理程序,导致页面上的事件处理函数被占用,从而引起内存泄漏的问题

方法:

  • 正确添加和删除事件处理程序:使用 addEventlistener() 方法来添加事件监听器,用完就移除
  • 使用事件委托:将事件处理函数添加到父元素,取而代之以通过父元素进行监听
  • 使用闭包注意回收:避免变量无法回收
  • 使用第三方库:如 React、Vue 等都针对事件管理提供了一些工具和 API

7️⃣事件委托

原理:

利用事件冒泡,将事件处理程序添加到父元素中,而不是在每个子元素上都添加处理程序

好处:

  • 代码更清晰,容易维护和修改
  • 提供代码性能,减少内容开销,降低页面加载事件

案例:

// 假如要给 ul#container 下所有 li 添加点击事件
const container = document.querySelector('ul#container');// 在 ul 上监听 click 事件,对 li 判断触发事件类型,并且执行事件交互方法
container.addEventListener('click', (event) => {if (event.target.tagName === 'LI') {// 在这里执行点击交互逻辑,对当前被点中的 li 进行操作}
});

结语

感谢读者阅读并关注博客文章,并对文章中提到的观点、建议或批评表示感谢

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

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

相关文章

C++篇----类、封装、类访问权限、类实例化

文章目录 一、面向过程和面向对象二、类 一、面向过程和面向对象 c语言是面向过程的编程语言 c是面向对象的编程语言 面向过程:关注过程,对于求解问题的不走,调用函数逐步解决问题 就洗衣服来说:洗衣服需要放水,倒洗衣…

10个必备的建筑可视化3dmax插件

当日复一日地处理项目时,很容易陷入舒适但效率不高的工作流程中。 插件是在不牺牲工作质量的情况下改进和加快工作流程的好方法。 尤其是在建筑可视化时,快节奏的行业往往需要艺术家灵活机智。 在本文中,我们将介绍 10 个最好的 3ds Max 插件…

C语言从入门到精通第11天(数组的基本操作)

数组的基本操作 数组的概念一维数组二维数组 数组的概念 在程序设计中,为了方便处理数据把具有相同类型的若干变量按有序形式集合在一起,这些按序排列的同类数据元素的集合称为数组。 在C语言中,数组属于构造数据类型,一个数组可…

Linux文本处理三大利器Grep、AWK、Sed

写在前面 Linux三剑客是文本处理工具,它们可以帮助我们快速、高效地对文本进行处理。其中包括了grep、awk、以及sed这三个强大的命令行工具。 Linux 三剑客主要作用: grep,它可以根据正则表达式查找相关内容并打印对应的数据。awk,它可以根…

C. Painting the Fence(思维 + 前缀和)

Problem - C - Codeforces You需要油漆一个由n个部分组成的长围栏。不幸的是,它没有被涂漆,所以你决定雇用q名画家来完成这项工作。第i名画家将会油漆所有满足lisxsri的部分x. 不幸的是,你的预算很紧,所以你只能雇用q-2名画家。显…

数据湖Iceberg-简介(1)

文章目录 Iceberg简介概述特性数据存储、计算引擎插件化实时流批一体数据表演化(Table Evolution)模式演化(Schema Evolution)分区演化(Partition Evolution)列顺序演化(Sort Order Evolution&a…

itop-3568开发板驱动学习笔记(22)设备树(一)设备树基础

《【北京迅为】itop-3568开发板驱动开发指南.pdf》 学习笔记 文章目录 设备树简介设备树编译设备树语法设备根节点设备子节点节点名称reg 属性#address-cell 和 #size-cells 属性model 属性status 属性compatible 属性aliases 节点chosen 节点device_type 属性自定义属性 设备树…

Linux云服务器的使用,以及运行Python程序

目录 1、使用Linux云服务器的软件 2、Linux系统运行Python程序 3、Linux系统查看包、虚拟环境、安装包等 以下几个深度学习服务器都不错:智星云、AutoDL、恒源云 1、使用Linux云服务器的软件 MobaXterm_Personal 推荐MobaXterm_Personal mobaxterm是一款方便网站…

数据库管理新定义:一款纯Web化免费SQL开发工具,免安装

SQL Studio是一款由麦聪软件研发的多数据库管理工具,提供Windows、Linux 和 MacOS三种版本的软件包,支持中英文两种语言。SQL Studio是用Java编写的,默认使用 JDK 8进行编译。 下载看这里: [SQLStudio] (http://www.maicongs.com/#/home/web)…

地热井监测控制系统解决方案

概述 地热井监测控制系统主要是对地热井采水和回灌进行流量、温度、水位(压力)等参数的实时监测,对地热站现场环境进行实时视频监控。地热井现场和取水井、回灌井安装监测装置,通过无线传输设备将数据实时传输至自然资源局已建中…

上海车展:预售价109.8万元,仰望U8见证国产品牌崛起

如果要评选2023上海车展上比亚迪展台“最亮的星”,估计很多媒体和观众都会毫不迟疑地把票投给仰望U8。 没办法,因为在本届车展上,仰望U8的表现实在是太吸睛了。 作为比亚迪旗下的高端新能源品牌,仰望汽车在上海车展上携两款车型—…

【Leetcode -141.环形链表 -2.两数相加】

Leetcode Leetcode -141.环形链表Leetcode -2.两数相加 Leetcode -141.环形链表 题目:给你一个链表的头节点 head ,判断链表中是否有环。 如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环。 为了表示给…

测试Ocr工具IronOCR(续2:编写圈选图片识别文本的程序)

上篇文章介绍了加载图片并圈选图片中文字区域的程序实现方式,本文基于此实现识别圈选区域文字内容的程序。主要识别语言包括英文和中文。IronOCR包中自带英文语言包,项目还需安装中文语言包,建议直接安装IronOcr.Languages.Chinese语言包&…

什么样的测试才是优秀的测试

什么样的测试才是优秀的测试 优秀的测试应该包括以下要素: 测试代码的可读性和可维护性 代码在项目中及特定源代码中的组织方式 测试所检查的内容 测试的可靠性及可重复性 测试对测试替身的使用 可读的代码才是可维护的代码 代码较差的可读性与缺陷密度密切相…

软件测试技术那么多,我们该如何分辨?

经典软件测试技术分类: 测试技术是指顺利完成测试的一系列相关过程,有很多可能的分类方式,表2-1就是其中的一种。表中列出了流行的测试技术,也按照上面的讨论对其进行分类:手工测试、自动测试、静态测试、动态测试、功…

今年SMETA审核费用即将涨价

【今年SMETA审核费用即将涨价】 SMETA全称( Sedex Members Ethical Trade Audit ),即Sedex会员社会道德贸易审核,它是Sedex发起的一种负责任的供应链审计方法/项目。 Sedex是一个全球性的责任商业平台,SMETA是审核方法…

手推FlinkML2.2(三)

SQLTransformer(SQL转换器)是一种数据预处理方法,允许您使用SQL语句对数据进行转换和操作。SQL转换器通常用于数据清洗、特征工程和数据聚合等任务,以提高数据分析和机器学习模型的性能。它可以与各种数据处理和存储系统&#xff…

本地搭建属于自己的ChatGPT:基于PyTorch+ChatGLM-6b+Streamlit+QDrant+DuckDuckGo

本地部署chatglm及缓解时效性问题的思路: 模型使用chatglm-6b 4bit,推理使用hugging face,前端应用使用streamlit或者gradio。 微调对显存要求较高,还没试验。可以结合LoRA进行微调。 缓解时效性问题:通过本地数据库…

你的车有通风座椅吗?新款奔驰S400升级原厂主副驾座椅通风

大家好,我是奔之升小志(bzs878),专注名车原厂升级,欢迎戳戳右上角“”号关注一下,持续为您带来精彩改装案例。 座椅通风有什么用?能改善身体与座椅接触面空气流通,达到不出汗的效果…

选择美国虚拟主机需注意的安全问题

在选择美国虚拟主机时,安全性应该是您首要关注的问题。虚拟主机通常是网站托管的最便宜和最方便的方式之一,但也存在安全问题。在本文中,我们将讨论一些您应该注意的安全问题,并提供一些解决方案来保护您的网站。 一、了解虚拟主机…