본문 바로가기
JavaScript

이벤트

by 융디's 2024. 4. 22.
728x90
이벤트

이벤트

@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 (클릭 이벤트)
    • 마우스로 요소를 클릭할 때 발생
    • 가장 일반적으로 사용되는 이벤트 중 하나
  1. mouseover (마우스 오버 이벤트)
    • 마우스를 요소 위로 이동했을 때 발생
    • 요소에 마우스가 올라갔을 때 작업을 수행하고자 할 때 사용
  1. mouseout (마우스 아웃 이벤트)
    • 마우스가 요소에서 벗어났을 때 발생
    • 요소에서 마우스가 벗어났을 때 작업을 수행하고자 할 때 사용
  1. mousedown (마우스 다운 이벤트)
    • 마우스 버튼을 눌렀을 때 발생
    • 버튼을 누르는 순간을 감지할 때 사용
  1. mouseup (마우스 업 이벤트)
    • 마우스 버튼을 놓았을 때 발생
    • 버튼을 놓는 순간을 감지할 때 사용
  1. keydown (키 다운 이벤트)
    • 키보드의 키를 눌렀을 때 발생
    • 키를 누르는 순간을 감지할 때 사용
  1. keyup (키 업 이벤트)
    • 키보드의 키를 놓았을 때 발생
    • 키를 놓는 순간을 감지할 때 사용
  1. keypress (키 프레스 이벤트)
    • 키보드의 키를 누르고 있는 동안 반복해서 발생
    • 글자를 입력할 때 반복적으로 발생하는 이벤트
  1. focus (포커스 이벤트)
    • 요소에 포커스가 이동했을 때 발생
    • 주로 입력 필드나 버튼 등의 요소에 사용
  1. blur (블러 이벤트)
    • 요소에서 포커스가 벗어났을 때 발생
    • 포커스가 해제되는 순간을 감지할 때 사용
  1. submit (제출 이벤트)
    • 폼을 제출할 때 발생
    • 폼 데이터를 처리하거나 유효성을 검사할 때 사용
  1. change (변경 이벤트)
    • 폼 요소가 변경되었을 때 발생
    • 주로 선택 박스나 체크 박스 등에서 사용
  1. input (입력 이벤트)
    • 폼 요소에 입력을 시작했을 때 발생
    • 텍스트 입력이 이루어지는 중간 결과를 감지할 때 사용
  1. load (로드 이벤트)
    • 웹 페이지나 리소스가 로드되었을 때 발생
    • 페이지나 이미지가 완전히 로드되었는지 확인할 때 사용
  1. DOMContentLoaded (DOM 로드 완료 이벤트)
    • DOM이 완전히 로드되고 파싱 되었을 때 발생
    • 스크립트가 실행되기 전에 초기화 작업을 수행할 때 사용
  1. touchstart (터치 시작 이벤트)
    • 터치를 시작할 때 발생
  1. touchend (터치 종료 이벤트)
    • 터치를 종료할 때 발생
  1. touchmove (터치 이동 이벤트)
    • 터치 중에 이동할 때 발생
  1. scroll (스크롤 이벤트)
    • 요소나 페이지가 스크롤 될 때 발생.
    • 스크롤 이벤트를 사용하여 요소의 스크롤 위치를 감지하거나 페이지의 스크롤에 대응
728x90

'JavaScript' 카테고리의 다른 글

이벤트 전파  (0) 2024.04.22
DOM  (0) 2024.04.22
Promise.all과 Promise.race  (0) 2024.04.21
async/await  (0) 2024.04.21
Promise  (1) 2024.04.21