将点击事件绑定到输入元素
[英]Binding click event to a input element
问题描述
I am trying to serve html files from server without using template engines .
我试图在不使用模板引擎的情况下从服务器提供 html 文件。 Please find the below script for starting the server.请找到以下用于启动服务器的脚本。
// 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;
};
Following is my html file:以下是我的 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>
I tried the following without any success:我尝试了以下但没有任何成功：
I included the
click()inline in the button element, and the function was declared in script tag in the same html file.我将click()内联包含在按钮元素中，并且该函数是在同一个 html 文件的脚本标记中声明的。 This did not work.这没有用。I included the fromScript function in
script.jsfile and served that file as static content.我在script.js文件中包含了 fromScript 函数并将该文件作为静态内容提供。 This did not work as expected.这没有按预期工作。
Then I used addEventListener to bind the click event to input element.然后我使用 addEventListener 将点击事件绑定到输入元素。 Now whenever I click the button, "Button Clicked" message is printed twice.现在，每当我单击按钮时，“单击按钮”消息都会打印两次。
What is the correct/best practice for binding dom events to the elements?将 dom 事件绑定到元素的正确/最佳实践是什么？
Edit编辑
Thanks for the answer Thijs Kramer .感谢Thijs Kramer的回答。 But the problem is due to the function name.但问题出在函数名上。
If I name the function as click it is not working.如果我将该功能命名为click ，则它不起作用。 But if I rename it to fromScript it is working.但是如果我将它重命名为fromScript，它就可以工作了。
Should we not use "click" for function name?我们不应该使用“click”作为函数名称吗？
3 个解决方案
解决方案1
1 2018-11-09 19:12:17
Your problem has nothing to do with express :) The best practice for binding click events is for example the following:您的问题与 express 无关:) 绑定点击事件的最佳实践如下：
<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>
Edit : I think I know what you mean:编辑：我想我知道你的意思：
If you rename the function fromScript to click , you obviously have to change the value of the onclick attribute as well:如果您将函数fromScript重命名为click ，您显然还必须更改onclick属性的值：
<input type="button" onclick="click()" />
解决方案2
0 2018-11-09 14:21:38
The below code should work fine:下面的代码应该可以正常工作：
// 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"));
then node script.js and try to access it by going to http://localhost:3103/temp.html ?然后node script.js并尝试通过访问http://localhost:3103/temp.html来访问它？
解决方案3
0 已采纳 2018-11-10 09:45:17
The reason for your naming problem is that the HTMLElement API (which all html elements inherit from) has a click property.您的命名问题的原因是HTMLElement API（所有 html 元素都继承自）具有click属性。 It is a function meant to be used to programmatically trigger a click event on the element.它是一个function ，用于以编程方式触发元素上的点击事件。
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click
To avoid confusion and unpredictable behaviour, always make sure to name your variables and functions unambigously with regard to inherited and built-in properties from the prototype chain.为避免混淆和不可预测的行为，请始终确保针对原型链中的继承和内置属性明确命名变量和函数。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.