DOM(Document Object Model) – 이벤트 핸들링 – 1 – 이벤트 처리기 등록

작성자 wooah

DOM(Document Object Model) – 이벤트 핸들링 – 1 – 이벤트 처리기 등록

DOM(Document Object Model)이란?

DOM(Document Object Model)은 웹 페이지의 구조를 표현하고 조작하는데 사용되는 인터페이스입니다. 웹 페이지의 모든 요소들(HTML 요소, CSS 스타일 등)은 DOM을 통해 객체로 표현됩니다. 자바스크립트를 사용하여 DOM에 접근하고 조작할 수 있으며, 이를 통해 웹 페이지의 동적인 변화를 구현할 수 있습니다.

이벤트 핸들링이란?

이벤트 핸들링은 웹 페이지에서 발생하는 이벤트(사용자의 동작이나 브라우저의 상태 변화 등)를 감지하고, 이에 대한 반응을 정의하는 과정입니다. 이벤트 핸들링을 통해 사용자와 웹 페이지 간의 상호작용을 가능하게 할 수 있습니다.

1. 이벤트 처리기 등록하기

이벤트 처리기를 등록하는 것은 특정 이벤트가 발생했을 때 실행될 함수를 지정하는 것을 의미합니다. 이렇게 등록된 처리기는 해당 이벤트가 발생했을 때 자동으로 실행됩니다.

예를 들어, 버튼을 클릭했을 때 특정 동작이 실행되도록 처리기를 등록하는 경우를 생각해보겠습니다. 이 때 사용되는 메서드는 addEventListener입니다. 

const button = document.getElementById('myButton');

function handleClick() {
  // 버튼을 클릭했을 때 실행될 동작을 여기에 작성합니다.
  console.log('버튼이 클릭되었습니다!');
}

button.addEventListener('click', handleClick);

이 코드에서 getElementById를 사용하여 HTML에서 myButton이라는 ID를 가진 요소를 찾아 button 변수에 할당합니다. 그리고 handleClick이라는 함수를 작성합니다. 이 함수는 버튼이 클릭되었을 때 실행될 동작을 정의합니다. 마지막으로, addEventListener를 사용하여 버튼에 클릭 이벤트 처리기를 등록합니다. 이제 버튼이 클릭되면 '버튼이 클릭되었습니다!'라는 메시지가 콘솔에 출력됩니다.

이벤트 처리기를 등록할 때, 이벤트 이름과 처리기 함수를 인자로 전달합니다. 이벤트 이름은 'click', 'mouseover', 'keydown' 등 다양한 종류가 있으며, 처리기 함수는 이벤트가 발생했을 때 실행될 코드를 포함합니다.

예시: 마우스 오버 이벤트 처리기 등록하기

이번에는 마우스가 요소 위로 올라갔을 때 발생하는 mouseover 이벤트에 대한 처리기를 등록하는 예시를 살펴보겠습니다.

const element = document.getElementById('myElement');

function handleMouseOver() {
  // 마우스가 요소 위로 올라갔을 때 실행될 동작을 여기에 작성합니다.
  console.log('마우스가 요소 위로 올라갔습니다!');
}

element.addEventListener('mouseover', handleMouseOver);

이 코드에서는 HTML에서 myElement라는 ID를 가진 요소를 찾아 element 변수에 할당합니다. 그리고 handleMouseOver라는 함수를 작성합니다. 이 함수는 마우스가 요소 위로 올라갔을 때 실행될 동작을 정의합니다. 마지막으로, addEventListener를 사용하여 요소에 마우스 오버 이벤트 처리기를 등록합니다. 이제 마우스가 요소 위로 올라가면 '마우스가 요소 위로 올라갔습니다!'라는 메시지가 콘솔에 출력됩니다.

이벤트 처리기 등록 시 주의해야 할 점

  1. 이벤트 타겟 선택: 이벤트 처리기를 등록할 때, 올바른 이벤트 타겟(HTML 요소, 문서 전체 등)을 선택해야 합니다. 올바른 선택자나 메서드를 사용하여 이벤트 타겟을 지정해야 합니다.

  2. 이벤트 중복 등록: 같은 이벤트에 대해 중복으로 처리기를 등록하면, 이벤트가 발생할 때 등록된 처리기가 여러 번 실행될 수 있습니다. 중복 등록을 피하기 위해 기존에 등록된 처리기를 제거하거나, once 옵션을 사용하여 한 번만 실행되도록 할 수 있습니다.

  3. 이벤트 버블링과 캡처링: 이벤트는 DOM 트리의 구조를 따라 상위 요소로 전파될 수 있습니다. 이벤트 버블링과 캡처링은 이벤트 전파 방식을 제어하는 메커니즘입니다. 이를 고려하여 처리기 등록 시 addEventListener의 세 번째 인자로 캡처링을 사용할지 버블링을 사용할지 지정할 수 있습니다.

  4. 이벤트 핸들러 내에서의 this: 이벤트 처리기 함수 내에서 this 키워드는 이벤트 타겟 요소를 참조합니다. 하지만 화살표 함수를 사용하면 this가 다른 객체를 참조할 수 있으므로 주의해야 합니다. 이 경우에는 함수 선언문을 사용하거나 bind 메서드를 이용하여 원하는 this 값을 명시적으로 설정할 수 있습니다.

  5. 크로스 브라우징: 다양한 브라우저에서 일관된 동작을 보장하기 위해 이벤트 처리기를 등록할 때, 브라우저 간의 호환성을 고려해야 합니다. 일부 구식 브라우저는 표준에 맞지 않는 이벤트 등록 방식을 사용할 수도 있으므로 주의해야 합니다.

위의 주의사항을 유념하면서 이벤트 처리기를 등록하면 웹 페이지에서 발생하는 다양한 이벤트에 대해 적절한 동작을 구현할 수 있습니다. 활용법을 익히고 다양한 이벤트 처리기를 등록해 보세요!

이벤트 처리기 등록하기 블로그 포스트에서 자세한 내용을 확인할 수 있습니다.

친절한 모범 답변을 위해 노력했지만, 더 필요한 내용이 있다면 언제든지 물어보세요!

답글 남기기