我遇到了一个与结合 HTML 和 Javascript 相关的小问题。我想要 调用带有参数的 JS 函数，而不需要任何按钮单击或触发器，如 onchange 或 input(如果有的话？)。 现在我在按钮标签中使用“onclick”。
我阅读了关于 unobtrusive Javascript 的吸引人的维基百科文章和 有一个这样的例子:
传统的编码方式:
<input type="text" name="date" onchange="validateDate()" />
但不引人注目的方法是:
<input type="text" name="date" id="date" />
在 JavaScript 中...
window.onload = function() {
document.getElementById('date').onchange = validateDate;
};
我正在寻找一种解决方案，当 onload 可以替换某些其他事件(例如用户输入或用户更改内容时)。
有没有一种方法可以调用函数而无需在按钮标记中使用 "onclick" 属性？
最佳答案
I'm looking for solution when onload can be replaced some other event like input by user...
所有事件都可以通过这种方式获得，onxyz 。所以onclick , onchange , onmouseover等
请注意，使用onxyz属性是老式的。与他人良好相处的新方法(可以追溯到 15 年前)是使用 addEventListener (attachEvent 在旧版 IE 上，例如 IE8 及更早版本)。
document.getElementById("date").addEventListener("change", validateDate, false);
关于addEventListener的好处/attachEvent的一点是，您可以在一个元素上为同一事件设置多个处理程序(因此“可以与其他处理程序很好地配合”)。
注意:在您的示例中，您在页面加载过程中非常晚连接了事件。 load在所有图像和其他链接资源完全下载后，事件才会触发。
相反，只需确保您的脚本位于文档的末尾，就在结束语 </body> 之前标签。然后就可以访问上面定义的元素了，无需等待load :
<html>
<!-- ... -->
<input type="text" name="date" onchange="validateDate()" />
<!-- ... -->
<script>
(function() {
"use strict";
document.getElementById("date").addEventListener("change", validateDate, false);
function validateDate() {
// ...
}
})();
</script>
</body>
</html>
请注意使用作用域函数以避免创建全局变量。
关于HTML 正文中没有函数调用的 JavaScript 函数调用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31472289/