ESLint 警告事件已定義但從未使用過

Question

我在這段簡單的代碼中遇到 ESLint 錯誤：

var trigger = document.getElementById("hello");
var audio = new Audio('audio/hello.mp3');

window.addEventListener('DOMContentLoaded', (event) => {
    trigger.addEventListener("click", function(event) {
        event.preventDefault();
        audio.play();
    }, false);
});

我得到的錯誤是： 'event' is defined but never used.

我讀過我可以通過在左括號后添加注釋來禁用此錯誤，其中“事件”是這樣使用的： // eslint-disable-line no-unused-vars 。

但我的問題是，這段代碼實際上有什么問題嗎？應該修復或改進嗎？ 而不是被忽略警告的評論所掩蓋？ 還是這種方法實際上沒有任何問題，只是 ESLint 迂腐？

Answer 1

但我的問題是，這段代碼實際上有什么問題嗎？應該修復或改進嗎？

您永遠不會使用您在DOMContentLoaded事件偵聽器中定義的event參數（您只使用在click處理程序中定義的參數），因此您應該刪除它：

window.addEventListener('DOMContentLoaded', () => {
// No `event` here −−−−−−−−−−−−−−−−−−−−−−−−−−^

---

話雖如此，但如果您控制加載代碼的script標記，則無需使用DOMContentLoaded 。 如果這樣做，只需使用type="module"或defer以確保代碼在構建 DOM 之前不會運行。

Answer 2

Linters 可能很煩人，但嘗試讓它們開心通常是個好主意。 但是，您可以通過以下划線開頭的參數名稱來指示您故意忽略該參數，而不是禁用該警告。

var trigger = document.getElementById("hello");
var audio = new Audio('audio/hello.mp3');

window.addEventListener('DOMContentLoaded', (_event) => {
    trigger.addEventListener("click", function(event) {
        event.preventDefault();
        audio.play();
    }, false);
});

您也可以只為參數名稱使用下划線，或者完全不使用它。