이벤트

이벤트

@2024.04.04

이벤트

💡

웹 페이지 상에서 사용자의 상호작용을 감지하고 처리하기 위한 메커니즘

• 사용자의 마우스 클릭, 키보드 입력, 화면 터치, 혹은 웹 페이지 로딩과 관련된다.

• 이벤트는 이벤트 핸들러를 통해 처리된다
  • 이벤트가 발생했을 때 실행될 함수

이벤트 리스너 등록

💡

이벤트를 감지하고, 처리할 때 이벤트 리스너를 등록한다.

• 이벤트 리스너는 특정 이벤트가 발생했을 때 실행할 함수를 지정

• 주로 addEventListener() 이용
  • target.addEventListener(type, listener);
    • target : 이벤트를 등록할 DOM 요소
    • type : 등록할 이벤트의 종류를 나타내는 문자열
    • listener : 이벤트 발생 시 실행할 함수로, 이벤트 객체를 매개변수로 받는다.

  // 예시: 버튼 클릭 이벤트 리스너 등록
  const button = document.getElementById('myButton');
  button.addEventListener('click', function() {
      alert('버튼이 클릭되었습니다!');
  });

• removeEventListener()로 이벤트 리스너 제거

이벤트 핸들러 함수 정의

💡

해당 이벤트가 발생했을 때 실행하는 함수

• 예시

  // 예시: 클릭 이벤트 핸들러 함수 정의
  function handleClick() {
      alert('버튼이 클릭되었습니다!');
  }
  

이벤트 핸들러 함수 연결

💡

정의한 이벤트 핸들러 함수를 이벤트 리스너에 연결

• 예시

  // 예시: 버튼에 클릭 이벤트 핸들러 연결
  const button = document.getElementById('myButton');
  button.addEventListener('click', handleClick);

이벤트 속성 → event.target

💡

자바스크립트 이벤트 객체에서 사용할 수 있는 속성 중 하나로, 이 속성은 이벤트가 발생한 실제 요소를 가리킨다.

• 이벤트가 어떤 요소에서 발생했는지 알 수 있도록 도와준다.

• 이벤트 위임이나 동적 요소 생성 등의 상황에서 유용하게 쓰인다.

• 속성
  • event.target.tagName : 요소의 태그를 문자열로 반환
  • event.target.id : 요소의 ID를 문자열로 반환
  • event.target.value : 요소의 값을 반환 (input, textarea,select)
  • event.target.innerHTML : 요소의 내부 HTML을 나타내며, 자식 요소까지 포함한 내용 반환
  • event.target.outerHTML : 요소의 내부 HTML을 나타내며, 해당 요소 + 외부 내용 반환
  • event.target.href : <a>요소의 href 속성 값
  • event.target.scr : <img> 요소의 scr 속성 값
  • event.target.parentNode, children : 요소의 부모 요소와 자식 요소

  document.addEventListener('click', function(event) {
      console.log('클릭된 요소:', event.target);
  });

  • 클릭을 한순간, 클릭된 요소에 관한 정보를 포함한 이벤트 객체가 이벤트 핸들러 함수의 매개변수로 전달

document.addEventListener('click', function(event) {
// 클릭시 매개변수로 li에 대한 요소 정보가 넘어간다. 
    if (event.target.tagName === 'LI') {
        console.log('클릭된 <li> 요소의 텍스트:', event.target.textContent);
    }
});

• 클릭 이벤트가 발생하면 등록된 콜백 함수가 실행 → 클릭된 요소에 대한 정보를 콘솔에 출력 → 콜백 함수의 매개변수인 event는 이벤트 객체를 받아 활용

이벤트 종류

1. click (클릭 이벤트)
   • 마우스로 요소를 클릭할 때 발생
   • 가장 일반적으로 사용되는 이벤트 중 하나

2. mouseover (마우스 오버 이벤트)
   • 마우스를 요소 위로 이동했을 때 발생
   • 요소에 마우스가 올라갔을 때 작업을 수행하고자 할 때 사용

3. mouseout (마우스 아웃 이벤트)
   • 마우스가 요소에서 벗어났을 때 발생
   • 요소에서 마우스가 벗어났을 때 작업을 수행하고자 할 때 사용

4. mousedown (마우스 다운 이벤트)
   • 마우스 버튼을 눌렀을 때 발생
   • 버튼을 누르는 순간을 감지할 때 사용

5. mouseup (마우스 업 이벤트)
   • 마우스 버튼을 놓았을 때 발생
   • 버튼을 놓는 순간을 감지할 때 사용

6. keydown (키 다운 이벤트)
   • 키보드의 키를 눌렀을 때 발생
   • 키를 누르는 순간을 감지할 때 사용

7. keyup (키 업 이벤트)
   • 키보드의 키를 놓았을 때 발생
   • 키를 놓는 순간을 감지할 때 사용

8. keypress (키 프레스 이벤트)
   • 키보드의 키를 누르고 있는 동안 반복해서 발생
   • 글자를 입력할 때 반복적으로 발생하는 이벤트

9. focus (포커스 이벤트)
   • 요소에 포커스가 이동했을 때 발생
   • 주로 입력 필드나 버튼 등의 요소에 사용

10. blur (블러 이벤트)
    • 요소에서 포커스가 벗어났을 때 발생
    • 포커스가 해제되는 순간을 감지할 때 사용

11. submit (제출 이벤트)
    • 폼을 제출할 때 발생
    • 폼 데이터를 처리하거나 유효성을 검사할 때 사용

12. change (변경 이벤트)
    • 폼 요소가 변경되었을 때 발생
    • 주로 선택 박스나 체크 박스 등에서 사용

13. input (입력 이벤트)
    • 폼 요소에 입력을 시작했을 때 발생
    • 텍스트 입력이 이루어지는 중간 결과를 감지할 때 사용

14. load (로드 이벤트)
    • 웹 페이지나 리소스가 로드되었을 때 발생
    • 페이지나 이미지가 완전히 로드되었는지 확인할 때 사용

15. DOMContentLoaded (DOM 로드 완료 이벤트)
    • DOM이 완전히 로드되고 파싱 되었을 때 발생
    • 스크립트가 실행되기 전에 초기화 작업을 수행할 때 사용

16. touchstart (터치 시작 이벤트)
    • 터치를 시작할 때 발생

17. touchend (터치 종료 이벤트)
    • 터치를 종료할 때 발생

18. touchmove (터치 이동 이벤트)
    • 터치 중에 이동할 때 발생

19. scroll (스크롤 이벤트)
    • 요소나 페이지가 스크롤 될 때 발생.
    • 스크롤 이벤트를 사용하여 요소의 스크롤 위치를 감지하거나 페이지의 스크롤에 대응