Question

我有一个正确加载的外部JS文件。

我在该文件中有一个函数，它在按钮上添加了一个事件监听器。

我也有内部文件，这个函数应该在触发事件时调用。

所以我们有： HTML

<input type="submit" id="subBtn" value="POST ARTICLE">

    <script>
        eventListeners();
    </script>

JS档案

function eventListeners(){
document.getElementById("subBtn").addEventListener("click",newContent); }

newContent（）也在JS文件中

这失败了。

但是我注意到，当我将事件监听器放在输入上时如此：

<input type="submit" onclick="newContent();" value="POST ARTICLE">

有效。

为什么呢？我该如何纠正自己？

非常感谢提前！

Answer 1

尝试将eventListeners（）调用移动到body onload函数。如果这样可行，则在将元素加载到文档之前，您的脚本将被触发。

像这样 -

<body onLoad="eventListeners();">

Answer 2

你在哪里包括你的JS文件？如果要在元素本身之前包含它，则无法添加事件侦听器，因为尚未加载该元素。通常最好的做法是将脚本包含在正文的最末端。在添加事件处理程序之前让JS等待文档加载也是明智的：

function newContent(){
    // function
}

function eventListeners(){
    document.getElementById("subBtn").addEventListener("click",newContent);
}

// Wait until the document is ready
document.addEventListener("DOMContentLoaded", function() { 
    eventListeners();
});

外部JS文件 - 事件监听器

2 个答案: