addEventListener() to non-existent elements?

Question

I have attached a click event listener on an element like:

document.querySelector('.class-name').addEventListener('click', function () {

});

The element may or may not get generated from the server-side.

So, if the server generates the element then all works fine but if not then i get a error like:

Cannot read property 'addEventListener' of null

I know why this happens, but I want to know whether there is any better way to attach event listeners to elements which won't generate such errors?

Answer 1

There's no way of doing this without some sort of conditional test, but you can save a few characters compared to an if block thus:

var el = document.querySelector('.class-name');
el && el.addEventListener(...);

I don't believe there's any simple way of avoiding the temporary variable (but see below).

---

NB: the below is included just to show that it's possible and should not be construed as a recommendation ;-)

If this is a very common pattern in your HTML and JS, a way to avoid the temporary assignment to el is this:

var missing = {
  addEventListener: function() {};
};  // a "null" element

(document.querySelector('.className') || missing).addEventListener(...);

The idea being that the || missing ensures that there's something present to absorb the addEventListener reference and invocation.