Если 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>
Но таким «молчаливым» подходом рискуете пропустить ошибку, если вдруг элемент должен был быть на странице, но его нет. Т.е. можно делать две функции, одну назвать $
, пусть дает ошибку если элемента нет, вторую как-то по другому, чтобы использовать только там, где ожидается отсутствие элемента.
if ($('#my_id')) { ... }
,$('...')?.onclick = ...
$('#my_id')?.onclick
вызывает ошибку Uncaught SyntaxError: Invalid left-hand side in assignment