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

【Vue.js】监听器功能(EventListener)的实际应用【合集】

目录

🤔在实际开发过程中,我遇到了一个颇为棘手的小问题

😋解决这个小问题

问题出现的原因剖析

解决方法阐述

问题成功解决!​

📖相关知识总结

基本概念

使用方法

实际应用场景


🤔在实际开发过程中,我遇到了一个颇为棘手的小问题

为了让代码结构更为清晰,便于后续的维护与管理工作,我打算把 HTML 文件中 <script></script> 标签内的 JavaScript 代码迁移到外部的 JS 文件里,随后在 HTML 文件中对其进行引用。

具体情况如下:

我先是把 HTML 文件里 <script> 标签内的所有 JavaScript 代码完整地剪切出来,然后粘贴到了新建的 JS 文件之中:

接着,我也在 HTML 文件里通过正确的语法对该 JS 文件进行了引用:

本以为一切都会顺利进行,然而事与愿违,程序的功能出现了异常状况。但是这样做了之后程序的功能出现了问题,计算器的输出框显示”{ { current }}“,并且鼠标对下面的按钮的交互都没有任何反应:

😋解决这个小问题

问题出现的原因剖析

因为在将原本位于 HTML 文件内的 <script> 内容转移至外部的 JS 文件之后,引发了一个关键的异常情境。具体而言,当 Vue 实例尝试进行挂载操作时,由于 JavaScript 代码与 HTML 页面的加载流程不再协调同步,致使其无法精准定位到对应的 DOM 元素。在 HTML 页面的加载过程中,DOM 元素的构建与 JavaScript 代码的加载及执行顺序若未妥善处理,就容易产生这种时序性的冲突。而此次问题的核心就在于,Vue 实例化的时机过早,在其所依赖的 DOM 结构尚未完整构建完成时就已启动挂载流程,从而导致无法找到对应的 DOM 元素,最终致使计算器功能出现异常,输出框错误地显示 “{ {current}}”,并且按钮的交互功能也完全丧失响应。

解决方法阐述

为有效化解这一困境,我采用了在 JS 文件中监听 DOMContentLoaded 事件的策略。此事件是在浏览器完成解析 HTML 文档且所有 DOM 元素构建完毕后触发的关键信号。通过在 JS 文件中精准地监听该事件,能够确保在 DOM 结构确凿无疑地加载完毕之后,才着手进行 Vue 实例的创建操作。如此一来,便巧妙地调整了代码的执行顺序,使得 Vue 实例在挂载时,其所需的 DOM 元素早已完备就绪,从而能够顺利地与之建立关联并完成挂载过程。

问题成功解决!

📖相关知识总结:

EventListener(事件监听器)是 JavaScript 中的一个重要概念,用于监听和响应 HTML 文档中的事件。

基本概念

  • 事件是浏览器或用户操作网页时发生的事情,比如用户点击按钮(click事件)、页面加载完成(load事件)、鼠标移动(mousemove事件)等。EventListener可以让你指定一个函数,当特定事件发生时就会调用这个函数。

使用方法

  • 添加监听器:通过addEventListener方法来为元素添加事件监听器。例如,为一个按钮添加点击监听器,代码可能是document.getElementById("myButton").addEventListener("click", function() { console.log("按钮被点击了"); });
    • 这里document.getElementById("myButton")是获取页面上idmyButton的元素,addEventListener的第一个参数"click"是事件类型,表示监听点击事件,第二个参数是一个函数,这个函数就是当点击事件发生时要执行的内容。
  • 多个监听器:一个元素可以添加多个相同类型或者不同类型的监听器。例如,可以同时为一个按钮添加点击监听器和鼠标移入监听器。
  • 移除监听器:当不再需要某个监听器时,可以使用removeEventListener方法移除它。不过要移除监听器,添加监听器时的函数必须是一个命名函数(不能是匿名函数),这样才能准确地引用并移除。

实际应用场景

  • 用户交互响应:如上述按钮点击的例子,通过监听器可以响应用户操作,改变网页内容、提交表单或者执行其他复杂的逻辑。
  • 页面状态变化监测:像DOMContentLoaded事件监听器用于在页面的 DOM 结构加载完成后执行特定操作,确保 JavaScript 代码在操作 DOM 元素时,元素已经存在。还有load事件可以用于在整个页面(包括资源如图片等)加载完成后执行代码。
  • 动态元素更新:对于动态创建的元素,比如通过 JavaScript 生成新的按钮或其他 HTML 元素,也可以为这些新元素添加监听器,以保证它们具有交互功能。

在这里插入图片描述


http://www.mrgr.cn/news/82860.html

相关文章:

  • 浅尝Selenium自动化框架
  • Elixir语言的正则表达式
  • H266/VVC标准的编码结构介绍
  • 解决“KEIL5软件模拟仿真无法打印浮点数”之问题
  • 知识产权要点
  • SqlSugar-文章目录
  • 《Vue3 六》组件间通信
  • NLP项目实战——基于Bert模型的多情感评论分类(附数据集和源码)
  • 【C++数据结构——栈与队列】链栈的基本运算(头歌实践教学平台习题)【合集】
  • 从 TiDB 学习分布式数据库测试
  • 大模型搜索引擎增强问答demo-纯python实现
  • Linux应用软件编程--网络通信(传输层:udp协议,tcp协议,应用层:http协议)
  • nlp培训重点-2
  • Kali系统(Debian 10.3) 遇到的问题
  • 【ROS2】☆ launch之Python
  • 云商城--业务+架构学习和环境准备
  • 【Transformer】小白入门指南
  • 【C++数据结构——线性表】单链表的基本运算(头歌实践教学平台习题)【合集】
  • 【C语言程序设计——选择结构程序设计】求输入的日期是该年的第几天(头歌实践教学平台习题)【合集】
  • 【C语言程序设计——循环程序设计】利用循环求数值 x 的平方根(头歌实践教学平台习题)【合集】
  • 【C语言程序设计——选择结构程序设计】预测你的身高(头歌实践教学平台习题)【合集】
  • 每天看一个Fortran文件(9)
  • 【C++面向对象——群体类和群体数据的组织】实现含排序功能的数组类(头歌实践教学平台习题)【合集】
  • 【什么是MVCC?】
  • 【stm32+K210项目】基于K210与STM32协同工作的智能垃圾分类系统设计与实现(完整工程资料源码)
  • 51c自动驾驶~合集45