将点击事件绑定到输入元素答案

【问题标题】：Binding click event to a input element将点击事件绑定到输入元素
【发布时间】：2018-11-10 17:45:17
【问题描述】：

我正在尝试从服务器不使用模板引擎提供 html 文件。请找到以下用于启动服务器的脚本。

// script.js
const express = require("express");
const bodyParser = require("body-parser");
const app = express();

app.use(express.static(__dirname));

app.get("/", (req, res) => {
   res.set("Content-Type", "text/html");
   const f = require("./templates")();
   console.log(f);
   res.send(f);
});

app.listen(3103, () => console.log("hi"));

// template.js
const fs = require("fs");
const html = fs.readFileSync(__dirname + "/temp.html", "utf8");

module.exports = (variables) => {
   return html;
};

以下是我的html文件：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./script.js"></script> <!-- The click function was served in a different file -->
</head>
<body>
    <p>Home Page</p>

    <input type="button" value="Click Me" id="btn" onclick="click()">
    <script>

        console.log("hi");
        function click(){ console.log("_Button clicked"); }                
        //document.getElementById("btn").addEventListener("click", () => {
            //console.log("Button Clicked");
        //});

    </script>
</body>
</html>

我尝试了以下方法但没有成功：

我在按钮元素中包含了click() 内联，并且该函数在同一个html 文件的脚本标记中声明。这不起作用。
我将 fromScript 函数包含在 script.js 文件中，并将该文件作为静态内容提供。这没有按预期工作。

然后我使用 addEventListener 将点击事件绑定到输入元素。现在，每当我单击按钮时，都会打印两次“Button Clicked”消息。

将 dom 事件绑定到元素的正确/最佳做法是什么？

编辑

感谢您的回答Thijs Kramer。但问题出在函数名上。

如果我将该功能命名为 click，则它不起作用。但是如果我将它重命名为 fromScript 它就可以工作了。

我们不应该用“click”作为函数名吗？

【问题讨论】：

您的fromScript() 函数是在另一个函数中定义的，因此它在全局范围内不可用。
我做了，因为您不真实地声称没有要求最佳实践作为对@Thijs Kramer 回答的评论。
@connexo：好的。我认为他试图帮助我解决这个问题（点击事件不起作用）。感谢您指出了这一点。以后有任何问题我都会更简洁。

标签： javascript html node.js express

【解决方案1】：

您的问题与快递无关 :) 绑定点击事件的最佳实践例如如下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>Home Page</p>

    <input type="button" value="Click Me" id="btn">
    <script>
        const button = document.getElementById("btn");
        button.addEventListener("click", () => {
            console.log("Button Clicked");
        });
    </script>
</body>
</html>

编辑：我想我明白你的意思了：

如果你将函数fromScript重命名为click，你显然也必须改变onclick属性的值：

<input type="button" onclick="click()" />

【讨论】：

感谢您的回答。我已经更新了我的问题。请检查编辑部分。我没有要求最佳实践。这里的问题是为什么单击事件不起作用。
您确实写过“将 dom 事件绑定到元素的正确/最佳实践是什么？”所以我为您提供了最佳实践。
我很抱歉造成混乱。请在您的浏览器中运行此示例。 jsbin.com/buzudepise/edit?html,js,output。我在 windows -> chrome & macOS -> chrome 中试过这个。如果它有效，请告诉我。

【解决方案2】：

您的命名问题的原因是 HTMLElement API（所有 html 元素都继承自该 API）具有 click 属性。它是一个function，用于以编程方式触发元素上的点击事件。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

为避免混淆和不可预知的行为，请始终确保根据原型链中的继承和内置属性明确命名变量和函数。

【讨论】：

【解决方案3】：

下面的代码应该可以正常工作：

// script.js
const express = require("express");
// const bodyParser = require("body-parser"); 
const app = express();

app.use(express.static(__dirname));
app.listen(3103, () => console.log("hi"));

然后node script.js 并尝试通过转到http://localhost:3103/temp.html 来访问它 ?

【讨论】：