Как правильно привязать обработчик, если элемент не был найден на странице?

Question

Я использую такую конструкцию:

const $ = document.querySelector.bind(document);

$('#my_id').onclick = function() {

};

Чтобы не возникало ошибки:

Uncaught TypeError: Cannot set properties of null (setting 'onclick')

Answer 1

Если querySelector возвращает null, вместо него можно подсунуть новый созданный элемент, на который будет добавлен обработчик.

function $(selector) {
  return document.querySelector(selector) || document.createElement('div');
}


$('#test-1').addEventListener('click', () => console.log(0));
$('#test-2').addEventListener('click', () => console.log(0));

<button id="test-1"> Click </button>

Но таким «молчаливым» подходом рискуете пропустить ошибку, если вдруг элемент должен был быть на странице, но его нет. Т.е. можно делать две функции, одну назвать $, пусть дает ошибку если элемента нет, вторую как-то по другому, чтобы использовать только там, где ожидается отсутствие элемента.

Answer 2

window.$ = el => new Proxy({
  el: (el instanceof HTMLElement) ? el : document.querySelector(el), 
}, { 
   get(target, prop) {
     return target.el?.[prop]; 
   }, 
   set(target, prop, value) {
    if (target.el instanceof HTMLElement)           // присваивание по условию
      target.el[prop] = value; 
    return true; 
  }, 
});

$('#not-exist').onclick = () => console.log('?');  // ошибки нет
$('#my-id').onclick = () => console.log('?');

<button id="my-id">?</button>

Answer 3

Можно реализовать с помощью оператора опциональной последовательности

document.querySelector('#my_id')?.addEventListener('click' , ()=>{
   [код обработки]
})

БЛОГ НА HUSL

Как правильно привязать обработчик, если элемент не был найден на странице?

Ответы (3 шт):