javascript/모던 자바스크립트 Deep Dive

이벤트(Event)

yongfront 2024. 2. 21. 15:30
반응형
SMALL

이벤트(Event)는 웹 페이지에서 발생하는 다양한 상황을 나타냅니다. 사용자가 버튼을 클릭하는 행위부터 키보드를 누르는 동작, 웹 페이지의 로딩 완료 등 웹 애플리케이션에서 발생하는 거의 모든 것을 이벤트로 간주할 수 있습니다. 이벤트는 웹 개발에서 사용자와의 상호작용을 구현하는 데 핵심적인 역할을 합니다.

이벤트 처리 방법

이벤트를 처리하기 위해, 개발자는 이벤트 리스너(Event Listener) 또는 이벤트 핸들러(Event Handler)를 사용하여 특정 이벤트가 발생했을 때 실행될 코드를 지정합니다.

  • 이벤트 리스너 등록: 이벤트 리스너는 특정 이벤트가 대상 요소에서 발생할 때마다 호출되는 함수입니다. addEventListener 메서드를 사용하여 이벤트 리스너를 등록할 수 있습니다.
  • document.getElementById("myButton").addEventListener("click", function() { console.log("버튼이 클릭되었습니다."); });
  • 이벤트 핸들러 속성 사용: HTML 요소의 이벤트 핸들러 속성을 통해 이벤트에 반응할 수도 있습니다. 이 방식은 주로 간단한 상호작용에 사용됩니다.
  • <button onclick="alert('버튼이 클릭되었습니다.')">클릭</button>

이벤트 전파

이벤트는 캡처링(Capturing) 또는 버블링(Bubbling) 단계를 통해 문서 구조를 통해 전파될 수 있습니다. 이를 이벤트 전파라고 합니다.

  • 캡처링: 이벤트가 상위 요소에서 하위 요소로 전파되는 과정입니다. 이벤트는 먼저 문서의 루트에서 시작하여, 이벤트가 발생한 요소까지 내려갑니다.
  • 버블링: 이벤트가 하위 요소에서 상위 요소로 전파되는 과정입니다. 대부분의 이벤트는 발생한 요소에서 시작하여 문서의 루트까지 올라갑니다.

이벤트 전파 제어

  • event.stopPropagation(): 현재 이벤트가 더 이상 전파되지 않도록 중단합니다.
  • event.preventDefault(): 이벤트의 기본 동작을 취소합니다. 예를 들어, 링크 클릭 시 페이지 이동을 방지합니다.

주요 이벤트 유형

  • 마우스 이벤트: click, dblclick, mouseover, mouseout, mousemove 등
  • 키보드 이벤트: keydown, keyup, keypress 등
  • 폼 이벤트: submit, change, input, focus, blur 등
  • 윈도우 이벤트: load, resize, scroll, unload 등

이벤트는 웹 페이지가 동적이고 상호작용이 가능하도록 만드는 핵심 요소입니다. 이벤트 리스너와 핸들러를 통해 사용자의 행동에 반응하고, 이벤트 전파를 제어하여 원하는 동작을 구현할 수 있습니다.

이벤트 타입(Event Type)은 웹 페이지에서 발생할 수 있는 다양한 이벤트의 종류를 지칭합니다. 각 이벤트 타입은 특정 상황이나 사용자의 행동에 의해 트리거됩니다. 여기에는 사용자의 마우스 클릭, 키보드 입력, 페이지 로딩 완료, 폼 제출 등의 이벤트가 포함됩니다. 아래는 웹 개발에서 자주 사용되는 몇 가지 주요 이벤트 타입과 그 설명입니다.

윈도우 이벤트 (UI 이벤트: 뷰포트(viewport)와 관련된 상호작용)

  • load: 페이지나 이미지가 완전히 로딩된 후 발생합니다.
  • unload: 문서가 언로드될 때 발생합니다.
  • resize: 브라우저 창의 크기가 변경될 때 발생합니다.
  • scroll: 사용자가 스크롤할 때 발생합니다.

마우스 이벤트

  • click: 사용자가 요소를 클릭할 때 발생합니다.
  • dblclick: 사용자가 요소를 더블 클릭할 때 발생합니다.
  • mousedown: 사용자가 마우스 버튼을 누를 때 발생합니다.
  • mouseup: 사용자가 누른 마우스 버튼을 놓을 때 발생합니다.
  • mousemove: 마우스가 움직일 때 발생합니다.
  • mouseover: 마우스가 요소 위로 이동할 때 발생합니다.
  • mouseout: 마우스가 요소에서 벗어날 때 발생합니다.

키보드 이벤트

  • keydown: 키보드의 키를 누를 때 발생합니다.
  • keyup: 키보드의 키에서 손을 떼었을 때 발생합니다.
  • keypress: 키를 누르고 있을 때 연속적으로 발생합니다(일부 브라우저에서는 사용되지 않음).

포커스 이벤트

  • focus: 요소가 포커스를 받을 때 발생합니다. 버블링되지 않습니다.
  • blur: 요소가 포커스를 잃었을 때 발생합니다. 버블링되지 않습니다.
  • focusin: 요소가 포커스를 받을 때 발생합니다. 버블링됩니다.
  • focusout: 요소가 포커스를 잃었을 때 발생합니다. 버블링됩니다.

폼 이벤트

  • submit: 폼 제출 버튼을 클릭하거나 Enter 키를 눌러 폼을 제출할 때 발생합니다.
  • change: 입력 필드의 값이 변경되었을 때 발생합니다.
  • input: 사용자가 입력 필드에 데이터를 입력할 때 발생합니다.

기타 이벤트

  • touchstart, touchmove, touchend, touchcancel: 터치스크린 장치에서 발생하는 터치 이벤트입니다.
  • animationstart, animationend, animationiteration: CSS 애니메이션이 시작, 종료되거나 반복될 때 발생합니다.

 

1. 클릭 이벤트 처리하기

HTML 버튼에 클릭 이벤트 리스너를 추가하여 사용자가 버튼을 클릭했을 때 메시지를 출력합니다.

<button id="clickButton">클릭하세요</button>

<script>
  document.getElementById('clickButton').addEventListener('click', function() {
    alert('버튼이 클릭되었습니다!');
  });
</script>

2. 마우스 오버 이벤트 처리하기

마우스가 특정 요소 위에 올라갔을 때 스타일을 변경합니다.

<div id="hoverDiv" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
  document.getElementById('hoverDiv').addEventListener('mouseover', function() {
    this.style.backgroundColor = 'red';
  });

  document.getElementById('hoverDiv').addEventListener('mouseout', function() {
    this.style.backgroundColor = 'blue';
  });
</script>

3. 폼 제출 이벤트 처리하기

폼 제출 이벤트를 캡처하여 기본 동작을 중지시키고, 대신 JavaScript를 사용해 데이터 처리를 진행합니다.

<form id="myForm">
  <input type="text" name="username" placeholder="사용자 이름" />
  <input type="submit" value="제출" />
</form>

<script>
  document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 폼의 기본 제출 동작 중지
    alert('폼이 제출되었습니다!');
    // 여기에 폼 데이터를 처리하는 로직을 추가할 수 있습니다.
  });
</script>

4. 키보드 이벤트 처리하기

사용자가 특정 키를 눌렀을 때 반응합니다. 여기서는 Enter 키를 감지합니다.

<input type="text" id="keyInput" placeholder="여기에 텍스트 입력 후 Enter를 누르세요">

<script>
  document.getElementById('keyInput').addEventListener('keydown', function(event) {
    if (event.key === "Enter") {
      alert('Enter 키가 눌렸습니다!');
    }
  });
</script>

5. 로드 이벤트 처리하기

페이지 로딩이 완료되었을 때 실행되는 코드입니다.

window.addEventListener('load', function() {
  alert('페이지 로딩이 완료되었습니다!');
});

이러한 이벤트 타입을 이해하고 활용하는 것은 웹 애플리케이션에서 사용자와의 상호작용을 구현하고 제어하는 데 필수적입니다. addEventListener() 메소드를 사용하여 이러한 이벤트에 대한 리스너를 등록할 수 있으며, 이벤트가 발생했을 때 원하는 작업을 수행할 수 있습니다.

728x90
반응형
LIST