효율적인 이벤트리스너 거는법과 tagName과 nodeName 차이

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

li에 클릭했을 때 행동을 제어하고 싶다면, document.querySelectorAll로 li 배열을 가져와서 foreach같은 걸로 순환하며 addEventListener를 등록할텐데 이렇게 하면 li 개수만큼 이벤트리스너가 등록되기때문에 효율적이지 못함. 게다가 등록한 리스너를 삭제해야하는 상황이 온다면 또 배열 돌리고 어쩌고... 손가락 아픔.

 

이럴때는 아예 부모인 ul에 addEventListener를 등록해서 조건을 거는 방법이 있음.

document.querySelector("ul").addEventListener("click", function(event) {
  if (event.target.nodeName != "LI") return;
  // 이제 li를 클릭했을때만 액션 발생
});

 

관련 내용은 각종 블로그나 프롱트님 영상 추천.

https://youtu.be/OmrxrHSrS2Y

근데 여기서 tagName과 nodeName 두가지 방법이 있는데 이참에 두 차이가 뭔지 한번 찾아봄.

 

 

1. 차이점

<button class="btn">다시보기</button>

이렇게 한 element가 있고, 저걸 변수로 받아서 찍어보자면 tagName과 nodeName은 똑같이 BUTTON임.

 

그렇다면 무슨 차이냐 할텐데 tagName은 nodetype이 1인 element의 이름을 가져옴.

DOM에서 읽을 수 있는 각각의 아이템(?)을 node라고 하는데 <p>, <div>, <h1> 이런게 전부 타입 1에 해당함. 그냥 element라 생각하면 된다.

 

nodeName은 nodetype에 제한이 없음. 코드로 정리하면 다음과 같음

const a = document.querySelector("button");
a.tagName; // BUTTON
a.nodeName; // BUTTON

const b = a.firstChild; // 이경우 안에 든 텍스트만 가리킴
b.tagName; // undefined
b.nodeName; // "#text"

const c = a.getAttributeNode("class");
c.tagName; // undefined
c.nodeName; // "btn"

뭐 IE 어떤 버전은 nodeName 지원안하고 어쩌고 그런 내용이 있지만 이제 가신 분이기때문에 결론 nodeName 써라.