本文旨在解决在通用JavaScript文件中，由于被不同PHP文件加载，导致部分PHP文件中不存在特定DOM元素时，addEventListener尝试在NULL对象上注册事件监听器的问题。通过简单的条件判断，可以避免在不存在的元素上添加事件监听器，从而防止JavaScript错误。
在开发Web应用时，我们经常会将一些通用的JavaScript代码提取到单独的文件中，供多个页面共享。然而，这种做法可能会带来一个问题：如果某个JavaScript文件包含对特定DOM元素的事件监听，但某些页面并不包含该DOM元素，那么尝试在该元素上添加事件监听器就会导致错误。
例如，假设我们有一个名为common.js的文件，其中包含以下代码：
const formQuote = document.querySelector('#quote');formQuote.addEventListener('submit', (event) => { console.log('表单已提交'); event.preventDefault(); // 阻止默认提交行为});
这段代码尝试获取ID为quote的表单元素，并为其添加一个submit事件监听器。如果页面中不存在ID为quote的表单，document.querySelector(‘#quote’)将返回null，此时尝试在null上调用addEventListener方法将会抛出一个错误。
为了解决这个问题，我们可以使用一个简单的if语句来检查formQuote是否为null。只有当formQuote不为null时，才添加事件监听器。
const formQuote = document.querySelector('#quote');if (formQuote) { formQuote.addEventListener('submit', (event) => { console.log('表单已提交'); event.preventDefault(); // 阻止默认提交行为 });}
代码解释:
const formQuote = document.querySelector(‘#quote’);：这行代码使用document.querySelector方法查找页面中ID为quote的元素，并将结果赋值给formQuote变量。如果页面中不存在该元素，formQuote的值将为null。if (formQuote) { … }：这是一个条件判断语句。JavaScript中的null是一个falsy值，这意味着在if语句中，null会被视为false。因此，只有当formQuote不为null时，if语句中的代码块才会被执行。formQuote.addEventListener(‘submit’, (event) => { … });：这行代码为formQuote元素添加一个submit事件监听器。当表单被提交时，监听器函数会被调用。console.log(‘表单已提交’);：这行代码在控制台中输出一条消息，表明表单已被提交。event.preventDefault();：这行代码阻止表单的默认提交行为。
注意事项:
确保你的JavaScript代码在DOM加载完成后执行。可以将JavaScript代码放在
以上就是如何在通用JS文件中为不存在的对象添加事件监听器的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1286410.html
微信扫一扫 
支付宝扫一扫 
