[JavaScript 문법 ] 39일차: 이벤트 처리 기초

이벤트란?

이벤트(Event)는 사용자가 웹 페이지와 상호작용할 때 발생하는 사건을 의미합니다. JavaScript는 이러한 이벤트를 감지하고 처리할 수 있는 기능을 제공합니다. 대표적인 이벤트로는 클릭, 입력, 마우스 이동 등이 있습니다.

이벤트 리스너 등록

이벤트 리스너(Event Listener)는 특정 이벤트가 발생했을 때 실행할 코드를 정의합니다. 이벤트 리스너를 등록하기 위해 addEventListener 메서드를 사용합니다.

 

기본 사용법

element.addEventListener(eventType, eventHandler);

• element: 이벤트를 감지할 DOM 요소
• eventType: 감지할 이벤트 유형 (예: 'click', 'input')
• eventHandler: 이벤트가 발생했을 때 실행할 함수

예제: 클릭 이벤트

<button id="myButton">Click me</button>

<script>
  let button = document.getElementById('myButton');
  button.addEventListener('click', () => {
    alert('Button was clicked!');
  });
</script>

이벤트 객체

이벤트가 발생하면 이벤트 객체(Event Object)가 생성되며, 이벤트에 대한 다양한 정보를 제공합니다. 이벤트 객체는 이벤트 핸들러의 첫 번째 매개변수로 전달됩니다.

예제: 마우스 이벤트 정보

<button id="myButton">Click me</button>

<script>
  let button = document.getElementById('myButton');
  button.addEventListener('click', (event) => {
    console.log('Mouse coordinates:', event.clientX, event.clientY);
  });
</script>

기본 이벤트 처리

HTML 요소는 기본적으로 특정 이벤트에 대해 기본 동작을 수행합니다. 예를 들어, 링크를 클릭하면 해당 링크로 이동합니다. 이러한 기본 동작을 막기 위해 event.preventDefault() 메서드를 사용할 수 있습니다.

예제: 링크 기본 동작 방지

<a href="https://www.example.com" id="myLink">Go to example.com</a>

<script>
  let link = document.getElementById('myLink');
  link.addEventListener('click', (event) => {
    event.preventDefault();
    alert('Link click prevented!');
  });
</script>

이벤트 전파

이벤트 전파(Event Propagation)는 이벤트가 발생한 요소에서 상위 요소로 전파되는 과정을 의미합니다. 이벤트 전파에는 캡처링(Capturing) 단계와 버블링(Bubbling) 단계가 있습니다.

캡처링과 버블링

• 캡처링(Capturing): 이벤트가 상위 요소에서 하위 요소로 전파됩니다.
• 버블링(Bubbling): 이벤트가 하위 요소에서 상위 요소로 전파됩니다.

예제: 이벤트 버블링

<div id="parent">
  <button id="child">Click me</button>
</div>

<script>
  let parent = document.getElementById('parent');
  let child = document.getElementById('child');

  parent.addEventListener('click', () => {
    alert('Parent clicked!');
  });

  child.addEventListener('click', () => {
    alert('Child clicked!');
  });
</script>

위 예제에서 버튼을 클릭하면 "Child clicked!"와 "Parent clicked!"가 차례로 표시됩니다. 이는 이벤트가 버튼에서 시작하여 부모 요소로 전파되기 때문입니다.

이벤트 전파 중지

이벤트 전파를 중지하기 위해 event.stopPropagation() 메서드를 사용할 수 있습니다.

예제: 이벤트 버블링 중지

<div id="parent">
  <button id="child">Click me</button>
</div>

<script>
  let parent = document.getElementById('parent');
  let child = document.getElementById('child');

  parent.addEventListener('click', () => {
    alert('Parent clicked!');
  });

  child.addEventListener('click', (event) => {
    event.stopPropagation();
    alert('Child clicked!');
  });
</script>

위 예제에서 버튼을 클릭하면 "Child clicked!"만 표시됩니다. 이는 event.stopPropagation() 메서드가 이벤트 버블링을 중지시켰기 때문입니다.

결론

이벤트 처리는 사용자와 웹 페이지 간의 상호작용을 관리하는 중요한 방법입니다. 이번 글에서는 이벤트의 기본 개념, 이벤트 리스너 등록, 이벤트 객체, 기본 이벤트 처리, 이벤트 전파와 중지에 대해 배웠습니다. 다음 글에서는 이벤트 처리 심화 주제에 대해 알아보겠습니다.

다음 글에서 만나요!