仅当元素存在时才添加事件监听器

Question

我想将事件监听器添加到 html 元素。但是当元素不存在时它会产生 js 错误。该元素仅存在于某些页面上。

    // (A) ATTACH CLICK LISTENER ON PAGE LOAD
window.addEventListener("load", () => {
  document.getElementById("download_mp3j_0").addEventListener("click", doSomething);
});
// (B) THE USUAL FUNCTION
function doSomething () {
  // (B1) DETACH CLICK LISTENER
  var div = document.getElementById("download_mp3j_0");
  div.removeEventListener("click", doSomething);
  // (B2) EXTRA - CHANGE THE TEXT IF YOU WANT
  div.innerHTML = "Downloading";
  // (B3) DO YOUR PROCESSING HERE
  alert("Downloading!");
  // (B4) RE-ENABLE AFTER PROCESSING IF YOU WANT
  // div.addEventListener("click", doSomething);
}

基本上，该功能是在单击按钮后将其删除，以避免多次重复单击。

我希望函数 doSomething 仅在元素download_mp3j_0存在时运行。

Answer 1

可选的链接运算符

一个简单的替代方法是使用可选链接 (?.)运算符：

.getElementById(id)?.addEventListener(...

并且事件处理程序仅在元素存在时附加。

您还可以在下载期间使用禁用属性，因为这样可以避免添加和删除现有的事件处理程序。

详细信息请参阅代码片段

.getElementById(id)?.addEventListener(...

window.addEventListener("DOMContentLoaded", function() {

  document.getElementById("download_mp3j_0")?.addEventListener("click", function() {

    let element = this;
    element.value = "Downloading...";
    element.disabled = true;
    element.style.cursor = "wait";

    // simulated download

    window.setTimeout(function() {
      element.value = "Download";
      element.disabled = false;
      element.style.cursor = "default";
    }, 2000);

  })
});

#download_mp3j_0 {
  background-color: steelblue;
  color: white;
}

#download_mp3j_0:disabled {
  background-color: orange;
}