【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")是获取页面上id为myButton的元素，addEventListener的第一个参数"click"是事件类型，表示监听点击事件，第二个参数是一个函数，这个函数就是当点击事件发生时要执行的内容。
• 多个监听器：一个元素可以添加多个相同类型或者不同类型的监听器。例如，可以同时为一个按钮添加点击监听器和鼠标移入监听器。
• 移除监听器：当不再需要某个监听器时，可以使用removeEventListener方法移除它。不过要移除监听器，添加监听器时的函数必须是一个命名函数（不能是匿名函数），这样才能准确地引用并移除。

实际应用场景

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