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

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

仅仅是一个FYI 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);
}

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