Javascript 如果将addEventListener放在头部而不是身体，则它不起作用

我真的不知道为什么这不起作用。在我的HTML中，如果我将脚本放在head部分，我的控制台会出现以下错误：

Uncaught TypeError: Cannot read property 'addEventListener' of null

如果我把我的脚本放在身体的底部，它工作得很好

HTML:

---

有谁能告诉我我做错了什么，把脚本标签放在哪里？另外，我应该做什么更改来从head部分运行脚本？我会很高兴你的回答。提前感谢

您的脚本是在主体HTML的其余部分之前加载和执行的，因此自然，

document.getElementById

将返回null

您应该在

document.ready

事件当天或之后运行事件侦听器订阅代码

将发布的代码包装到JS函数中，然后将该函数设置为要在document.ready上执行的回调：

document.addEventListener（'load'，initFn）
如果您将
放在从上到下的
javascript加载中。
因此，加载时返回未定义的eventlistener
因此，请尝试在
标记结束前使用脚本，它会起作用。

像这样：

<script type="text/javascript" src="script.js"> </script>
</body>

关于Josh E的回答：

您应该在document.ready事件上或之后运行事件侦听器订阅代码

如果要在元素可用时立即执行代码，可以使用
requestAnimationFrame
在页面加载期间扫描DOM，而不是等待整个页面加载：

function doSomethingWithElement(myElement) {
    myElement.addEventListener('click', function() {
        // Do stuff here
    });
}

function searchForElement() {
    const el = document.getElementById('img1');
    if (el) {
       return doSomethingWithEl(el); 
    }
    window.searchID = window.requestAnimationFrame(searchForElement);
}

// Store the request ID so it can be cancelled later
// Otherwise it'll run forever!
window.searchID = window.requestAnimationFrame(searchForElement);
window.addEventListener('load', function() {
    window.cancelAnimationFrame(window.searchID);
});

这可能有些过分，但当您希望尽快操作DOM元素或向DOM元素添加侦听器时，它非常有用。

<script type="text/javascript" defer src="script.js"> </script>


添加关键字延迟，脚本在加载所有DOM元素时运行
必须加载DOM才能获取元素并附加侦听器。如果您的代码在头部，则在脚本运行之前，DOM尚未加载。要么将代码包装在
onload
或ready包装器中，要么将代码移动到HTMLY下您需要将其放入
$（document）.ready（）
中，如果它位于头部，因为在添加handler@jdubjdub,这只适用于jQuery。您想要使用的任何就绪状态都是可以的，只要在加载DOM后运行的东西就可以了。关于
onload
不太确定。w3schools网站不再准确了吗？我尝试了这个代码，但它并没有在控制台上显示任何内容。。。但是也没有错误
document.addEventListener（'onload'，函数abc（）{var shahin=document.getElementById（'img1'）；var lina=document.getElementById（'img2'）；var adrita=document.getElementById（'img3”）；shahin.addEventListener（'click'，picShow）；lina.addEventListener（'click'，picShow）；adrita.addEventListener（'click'，picShow）；函数picShow（）{console.log（this）；}}）我编辑了我的答案--尝试使用'load'而不是'onload'作为事件的名称。有人能告诉我应该做什么更改才能从head开始编写脚本吗？我试图使用document.addEventListener（'onload'，函数abc（）{并将整个代码包装在其中…但仍然无法工作。。。
function doSomethingWithElement(myElement) {
    myElement.addEventListener('click', function() {
        // Do stuff here
    });
}

function searchForElement() {
    const el = document.getElementById('img1');
    if (el) {
       return doSomethingWithEl(el); 
    }
    window.searchID = window.requestAnimationFrame(searchForElement);
}

// Store the request ID so it can be cancelled later
// Otherwise it'll run forever!
window.searchID = window.requestAnimationFrame(searchForElement);
window.addEventListener('load', function() {
    window.cancelAnimationFrame(window.searchID);
});

<script type="text/javascript" defer src="script.js"> </script>