JavaScript

[Js-기초]-addEventListener속성 종류

Kim Power 2025. 5. 13. 16:57

오늘은 addEventListener의 종류를 알아보겠습니다.

addEventListener는 JavaScript에서 특정 이벤트가 발생했을 때 실행할 함수를 등록하는 메서드 입니다.

 

UI 이벤트

이벤트설명
load 웹 페이지의 로드가 완료되었을 때
unload 웹 페이지가 언로드될 때 (예: 다른 페이지로 이동)
error 자바스크립트 오류 발생 또는 자원 로드 실패 시
resize 브라우저 창 크기를 조정했을 때
scroll 사용자가 페이지를 스크롤했을 때

 

EX)
<body onload="console.log('페이지가 로드되었습니다!')">
  <script>
    window.addEventListener('resize', () => {
      console.log('창 크기가 변경되었습니다.');
    });

    window.addEventListener('scroll', () => {
      console.log('페이지가 스크롤 중입니다.');
    });
  </script>
</body>

키보드 이벤트

이벤트설명
keydown 키를 처음 눌렀을 때
keyup 키에서 손을 뗐을 때
keypress 문자가 입력되었을 때 (현재는 일부 브라우저에서 deprecated)

EX)

<input type="text" id="inputBox" placeholder="키보드 입력해 보세요" />
<script>
  const inputBox = document.getElementById('inputBox');

  inputBox.addEventListener('keydown', (e) => {
    console.log(`키 눌림: ${e.key}`);
  });

  inputBox.addEventListener('keyup', (e) => {
    console.log(`키 뗌: ${e.key}`);
  });
</script>
 

마우스 이벤트

이벤트설명
click 요소를 클릭했을 때 (눌렀다 뗐을 때)
dblclick 요소를 더블 클릭했을 때
mousedown 마우스를 누를 때
mouseup 누른 마우스를 뗄 때
mousemove 마우스를 움직일 때
mouseover 요소 위로 마우스가 올라왔을 때
mouseout 요소에서 마우스가 벗어났을 때
 

EX)

<button id="myBtn">클릭하세요</button>
<script>
  const btn = document.getElementById('myBtn');

  btn.addEventListener('click', () => {
    console.log('버튼이 클릭되었습니다');
  });

  btn.addEventListener('dblclick', () => {
    console.log('버튼이 더블 클릭되었습니다');
  });
</script>

포커스 이벤트

이벤트설명
focus 요소가 포커스를 얻었을 때
focusin 자식 요소가 포커스를 받을 때 (버블링 O)
blur 요소가 포커스를 잃었을 때
focusout 자식 요소가 포커스를 잃을 때 (버블링 O)
EX)
<input type="text" id="focusInput" placeholder="포커스 테스트" />
<script>
  const input = document.getElementById('focusInput');

  input.addEventListener('focus', () => {
    console.log('입력창에 포커스가 갔습니다');
  });

  input.addEventListener('blur', () => {
    console.log('입력창 포커스가 해제되었습니다');
  });
</script>

폼 이벤트

이벤트설명
input <input> 또는 <textarea>의 값이 변경되었을 때
change 선택상자, 체크박스, 라디오 버튼 등이 변경되었을 때
submit 폼이 제출되었을 때
reset 폼 리셋 버튼을 클릭했을 때
cut 입력 필드의 내용을 잘라냈을 때
copy 입력 필드의 내용을 복사했을 때
paste 입력 필드에 붙여넣었을 때
select 입력 필드에서 텍스트가 선택되었을 때

 EX)

<form id="myForm">
  <input type="text" name="name" />
  <button type="submit">제출</button>
</form>

<script>
  const form = document.getElementById('myForm');

  form.addEventListener('submit', (e) => {
    e.preventDefault(); // 기본 제출 막기
    console.log('폼이 제출되었습니다');
  });

  form.addEventListener('reset', () => {
    console.log('폼이 리셋되었습니다');
  });
</script>

 

 

 

이렇게 이벤트별로 정리해 보았습니다.

지금까지 addEventListener에 관한 글이었습니다.

방문해 주셔서 감사합니다.❤️❤️