[JavaScript] addEventListener, removeEventListener

📌 addEventListener( )

addEventListener()는 document의 특정 요소 (Id, class 등) event를 등록할 때 사용한다.

[ html]

<div id="cols">
  <button class="btn">A</button>
  <button class="btn">B</button>
  <button class="btn">C</button>
</div>

[ js ]

let cols = document.querySelectorAll("#cols .btn");

for(i=0; i<cols.length; i++) {
  cols[i].addEventListener("click", click);
}

function click(e) {
  window.alert(this.innerHTML);
}

querySelectorAll 함수를 이용해 div 안의 id 값 'cols'와 button의 class값 'btn'을 가져온 후, 반복문을 사용하여 해당하는 모든 값에 addEventListener를 지정해 click함수를 실행하도록 하는 스크립트이다.

📌 removeEventListener( )

removeEventListener()는 document의 특정 요소 (Id, class 등) event를 제거할 때 사용한다.

[ html]

<div id="cols">
  <button class="btn">A</button>
  <button class="btn">B</button>
  <button class="btn">C</button>
</div>

[ js ]

let cols = document.querySelectorAll("#cols .btn");

for(i=0; i<cols.length; i++) {
  cols[i].removeEventListener("click", click);
}

function click(e) {
  window.alert(this.innerHTML);
}

위와 반대로 모든 값에 removeEventListener를 지정해 click함수를 제거하도록 하는 스크립트이다.

📌 이벤트 종류

• click : 마우스 버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다.
• mouseover : 마우스를 HTMl 요소 위에 올리면 발생한다.
• mouseout : 마우스가 HTML 요소 밖으로 벗어날 때 발생한다.
• mousedown : 클릭을 하기 위해 마우스 버튼을 누르고 아직 떼기 전인 순간, HTML 요소를 드래그할 때 사용할 수 있다.
• mouseup : 마우스 버튼을 떼는 순간, 드래그한 HTML 요소를 어딘가에 놓을 때 사용할 수 있다.
• mousemove : 마우스가 움직일 때마다 발생한다. 마우스 커서의 현재 위치를 계속 기록하는 것에 사용할 수 있다.
• focus : HTML 요소에 포커스가 갔을 때 발생한다.
• blur : HTML 요소가 포커스에서 벗어났을 때 발생한다.
• keypress : 키를 누르는 순간에 발생하고, 키를 누르고 있는 동안 계속해서 발생한다.
• keydown : 키를 누를 때 발생한다.
• keyup : 키를 눌렀다가 떼는 순간에 발생한다.
• load : 웹페이지에서 사용할 모든 파일의 다운로드가 완료되었을때 발생한다.
• resize : 브라우저 창의 크기를 조절할때 발생한다.
• scroll : 스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤할 때 발생한다. 페이지에 스크롤바가 없다면 이벤트는 발생하지 않다.
• unload : 링크를 클릭해서 다른 페이지로 이동하거나 브라우저 탭을 닫을 때 혹은 브라우저 창을 닫을 때 이벤트가 발생한다.
• change : 폼 필드의 상태가 변경되었을 때 발생한다. 라디오 버튼을 클릭하거나 셀렉트 박스에서 값을 선택하는 경우를 예로 들수 있다.

📌 useEffect에서 응용하기

useEffect(() => {
  window.addEventListener("resize", handleResize);
  
  return () => {
    window.removeEventListener("resize", handleResize);
  };
}, []);

컴포넌트가 처음 렌더링 될 때 useEffect가 실행되면서 addEventListener를 통해 resize 이벤트가 등록되어 handelResize 함수가 실행됨과 동시에 clean up 함수로 handleResize를 제거하는 removeEventListener가 실행된다.

< 참고 : https://kyounghwan01.github.io/blog/JS/JSbasic/addEventListener/ >