如何在通用JS文件中為不存在的對象添加事件監(jiān)聽器

本文旨在解決在通用JavaScript文件中，由于被不同php文件加載，導(dǎo)致部分PHP文件中不存在特定dom元素時，addEventListener嘗試在NULL對象上注冊事件監(jiān)聽器的問題。通過簡單的條件判斷，可以避免在不存在的元素上添加事件監(jiān)聽器，從而防止JavaScript錯誤。

在開發(fā)Web應(yīng)用時，我們經(jīng)常會將一些通用的JavaScript代碼提取到單獨的文件中，供多個頁面共享。然而，這種做法可能會帶來一個問題：如果某個JavaScript文件包含對特定DOM元素的事件監(jiān)聽，但某些頁面并不包含該DOM元素，那么嘗試在該元素上添加事件監(jiān)聽器就會導(dǎo)致錯誤。

例如，假設(shè)我們有一個名為common.JS的文件，其中包含以下代碼：

const formQuote = document.querySelector('#quote');  formQuote.addEventListener('submit', (event) => {   console.log('表單已提交');   event.preventDefault(); // 阻止默認(rèn)提交行為 });

這段代碼嘗試獲取ID為quote的表單元素，并為其添加一個submit事件監(jiān)聽器。如果頁面中不存在ID為quote的表單，document.querySelector(‘#quote’)將返回null，此時嘗試在null上調(diào)用addEventListener方法將會拋出一個錯誤。

為了解決這個問題，我們可以使用一個簡單的if語句來檢查formQuote是否為null。只有當(dāng)formQuote不為null時，才添加事件監(jiān)聽器。

const formQuote = document.querySelector('#quote');  if (formQuote) {   formQuote.addEventListener('submit', (event) => {     console.log('表單已提交');     event.preventDefault(); // 阻止默認(rèn)提交行為   }); }

代碼解釋:

• const formQuote = document.querySelector(‘#quote’);：這行代碼使用document.querySelector方法查找頁面中ID為quote的元素，并將結(jié)果賦值給formQuote變量。如果頁面中不存在該元素，formQuote的值將為null。
• if (formQuote) { … }：這是一個條件判斷語句。JavaScript中的null是一個falsy值，這意味著在if語句中，null會被視為false。因此，只有當(dāng)formQuote不為null時，if語句中的代碼塊才會被執(zhí)行。
• formQuote.addEventListener(‘submit’, (event) => { … });：這行代碼為formQuote元素添加一個submit事件監(jiān)聽器。當(dāng)表單被提交時，監(jiān)聽器函數(shù)會被調(diào)用。
• console.log(‘表單已提交’);：這行代碼在控制臺中輸出一條消息，表明表單已被提交。
• event.preventDefault();：這行代碼阻止表單的默認(rèn)提交行為。

注意事項:

• 確保你的JavaScript代碼在DOM加載完成后執(zhí)行。可以將JavaScript代碼放在