클래스나 아이디 값이 없는 Element 가져올 때 문제

document.addEventListener('click', function (event) {
    if(event.target === document.querySelector('button')) return;
    
    (...)
  }, false);

다음과 같이 클래스나 아이디명이 지정되어 있지 않은 버튼 요소를 이벤트 처리 내에서 식별하기 위해서 조건문을 작성하였다.

하지만 여러 버튼 중 가장 처음에 있는 버튼 요소만 이벤트를 감지하는 문제가 발생하였다.

 

문제해결

Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.

querySelector로 참조한 노드 객체는 문서 내 첫 번째 Element를 가져오기 때문에 발생한 쉬운 문제였다.

이를 대신에 다음과 같이 Array.includes()를 대신하여 요소를 식별하였다.

document.addEventListener('click', function (event) {
    if(Array.from(document.querySelectorAll('button')).includes(event.target)) return;
    //querySelectorAll로 가져온 객체는 HtmlCollection 유사 배열이기 때문에 정규 배열로 바꿔줘야 됨
    (...)
  }, false);

---

• Element.matches()

document.addEventListener('click', function (event) {
    if(event.target.matches("#pageContainer button")) return;

    (...)
  }, false);

• (추가 2021.07.28)HtmlElement.nodeName

$itemList.addEventListener('click', (event) => {
    if(event.target.nodeName !== 'LI') return;

   (...)
});

주의할 점은 nodeName 프로퍼티는 언제나 해당 HTML 요소의 태그 이름을 대문자로 저장한다는 것이다.