时间戳

首页 > 解决方案 > 如何在我的 node/express 应用程序中添加事件侦听器？

node.js - 如何在我的 node/express 应用程序中添加事件侦听器？

问题描述

我仍在努力了解前端与后端的可能性。当我无法选择文档时，我仍然不明白如何将 eventListener 之类的内容合并到我的应用程序中。

我创建了一个 script.js 文件并将其添加到我的公共目录中：

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hours Calculator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/styles.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/391e6a689e.js" crossorigin="anonymous"></script>
    <script src="/script.js"></script>
</head>
<body>

我在我的 app.js 中提供这个文件夹/文件，如下所示：

app.use(express.static(__dirname + '/public'));

但是我无法在我的 script.js 中定位任何内容，例如：

let h1 = document.body.querySelector('h1');
h1.style.color = 'brown';

不工作。h1 未定义。

我确信有一个非常直截了当的解释，但我的理解存在一些差距，并且希望有人可以向我解释为什么这不起作用以及如何让前端和后端交互。

标签： node.jsexpressevent-handlingdom-events

解决方案

Node.js 的“events”模块和“EventEmitter”模块促进了 Node 中对象之间的通信。EventEmitter 模块是 Node 异步事件驱动架构的核心。以下是创建自定义事件并发出它们的方法：

const EventEmitter = require('events');
const myEmitter = new EventEmitter();

//Event Listener
const EventListenerFunc = () => {
 console.log('an event occurred!');
}

//Registering the event with the listener
myEmitter.on('eventName', EventListenerFunc);

//Emitting the event 
myEmitter.emit('eventName');

Javascript 是一种脚本语言。它基本上用于客户端。JavaScript 可以在任何引擎中运行，例如 JavaScript Core (Safari)、Spider monkey (Firefox)、V8 (Google Chrome)。NodeJS 是一个 Javascript 运行时环境。NodeJS 代码可以在浏览器之外运行。它主要用于服务器端。Node.js 仅在主要由 Google Chrome 使用的 V8 引擎中运行。Nodejs 带有很多模块，主要用于 Web 开发。Node.js 使 Javascript 更强大，并为其添加了许多很棒的功能。

Node.js 不提供内置 DOM，因此您无法在 Node.js 中访问文档对象，并且有几个模块可以从 HTML 源代码字符串构建 DOM。两个流行的 DOM 模块是cheerio和jsdom。您可以利用这些模块来访问代码中数据的 DOM 级别操作。

推荐阅读