Javascript函数调用，不需要在HTML正文中调用函数

Javascript function invocation without function calls in HTML body?

本文关键字：正文 调用 函数 HTML 函数调用 不需要 Javascript      更新时间：2023-09-26

在结合HTML和Javascript时遇到了一个小问题。我想要调用JS函数的参数，而不需要任何按钮点击或触发，如onchange或输入(如果有一个?)现在我在我的按钮标签中使用"onclick"

我读了一篇吸引人的关于不引人注目的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"属性?

我正在寻找解决方案时，onload可以取代一些其他事件，如输入用户…

所有的事件都可以通过这种方式获得，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>
相关文章：