Adding events to elements the simple way, using optional chaining

On modern JavaScript driven or enhanced sites the HTML DOM is sprinkled with events.

Since the birth of HTML5, (and decline of the worst (most expensive) browser ever: Microsoft Explorer) the appropriate way of attaching events is using AddEventListener()

document.querySelector('selector').addEventListener('click', function () { console.log("Hi, you clicked") });

This works only if the queried element does exists. Otherwise you”ll get an error and further execution of the script will fail.

So you’ll need to add a conditional check, the querySelector function returns null when the element can’t be found:

if (document.querySelector('selector'))
 document.querySelector('selector').addEventListener('click', function () {
console.log("Hi, you clicked")
});

Modern JavaScript is developing

But functionality to JavaScript is added every year and now there is a optional chaining and that feature is exactly what we need.

Optional chaining was introduced in ES2020. It’s supported by all modern updated browsers.

Optional chaining

Simply add a ? to a object property or method to check if it is existing.

book.author?.name

This will not cause an error if book.author is nullish (not existing)

Using this syntax and arrow functions the new code for attaching an event to an element is:

document.querySelector('selector')?.addEventListener('click', ()=>console.log("Hi, you clicked"));

If the element doesn’t exist, it will not do anything (document.querySelector('selector') is nullish). It won’t cause an error.

Exactly what we need!

UPDATE

What I miss though is something like this:

document.querySelector("#menu-comments a")?.href += "?comment_status=moderated";

Above oneliner is my simple solution to set the default Comments-link in WordPress to show the pending or new comments by default. Most (99%) are SPAM unfortunately, so this way it’s safer to select all and do a bulk action delete permanently or mark as spam.

But above onliner gives an JS error:

Uncaught SyntaxError: invalid assignment left-hand side

To my surprise there was a proposal in the spec to allow this. I would welcome that change, hopefully it will come one day.

I hate writing this verbose conditional:

if (document.querySelector("#menu-comments a"))
document.querySelector("#menu-comments a").href += "?comment_status=moderated";

Maybe I should start writing CoffeeScript or use Babel by default. 😉

Tags: Javascript

This entry was posted on Thursday, August 11th, 2022 at 12:05 pm and is filed under HTML5, Javascript, Webtechnology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.