有条件地将事件附加到仅出现在某些页面上的元素的最佳方法？

Question

我（终于）学习使用事件，并且一直想知道我将事件有条件附加到元素的方法是否是最好的方法。

假设您有一些 JavaScript 将单击事件附加到 ID 为“button”的元素：

document.getElementById('button').onclick=function();

由于我在整个站点范围内使用我的主 .js，因此经常出现的情况是，某些页面可能包含具有“按钮”ID 的元素，但许多其他页面则不然。在后一种情况下，控制台会记录错误（无法设置属性）。

所以我像这样解决这个问题：

if(document.getElementById('button')) {
    document.getElementById('button').onclick=function();
}

或缩写形式：

var t = document.getElementById('button');
if(t) {
    t.onclick=function();
}

它确实有效，但由于某种原因感觉有点不健康。也许有更好的方法吗？

Answer 1

你所做的一切都很好。如果你想添加 jQuery，它会为你处理测试。

Answer 2

仅供参考

onclick

是分配点击事件的旧方法。它只允许分配一项功能。 除非您支持 IE8 或更早版本，否则我建议使用

addEventListener()

，这是一种更现代的方法。

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

var el =document.getElementById('button');
if (el) {
  el.addEventListener('click', function (){
    alert('hi!');
  }, false);
}

是的，您应该在添加之前检查它是否存在。

Answer 3

document.getElementdById('button')?.addEventListener('click', function (){ });