Categories: JavaScript

JavaScript 자바스크립트 이벤트 리스너 addEventListener

addEventListener 란?

자바스크립트에서 이벤트를 다루는 것은 웹 개발의 핵심 요소 중 하나입니다. 이벤트는 사용자의 행동(클릭, 스크롤, 키보드 입력 등)에 반응하여 특정 작업을 수행하는 메커니즘입니다. 이 글에서는 자바스크립트의 이벤트 리스너 addEventListener 메서드를 통해 이벤트를 어떻게 처리하는지 알아보겠습니다.

addEventListener는 HTML 요소에 이벤트 리스너를 추가하는 자바스크립트의 내장 메서드입니다. 이 메서드를 사용하면 웹 페이지의 특정 요소에 이벤트(예: 클릭, 마우스오버)가 발생했을 때 실행할 함수를 지정할 수 있습니다.

addEventListener 기본 사용법

addEventListener의 기본적인 사용법은 다음과 같습니다.

JavaScript
element.addEventListener(event, function, useCapture);
JavaScript

  • element: 이벤트 리스너를 추가할 HTML 요소
  • event: 반응하고자 하는 이벤트의 종류 (예: ‘click’, ‘mouseover’)
  • function: 이벤트가 발생했을 때 실행될 함수
  • useCapture (선택적): 이벤트 캡처링 여부를 나타내는 불린값 (기본값은 false)

addEventListener의 특징

  1. 이벤트 타입(type): 첫 번째 매개변수는 이벤트의 종류를 나타냅니다. 예를 들어, ‘click’, ‘mouseover’, ‘keydown’ 등과 같은 문자열입니다.
  2. 리스너(listener): 두 번째 매개변수는 이벤트가 발생할 때 호출되는 함수입니다. 이 함수는 이벤트에 대한 정보를 담고 있는 Event 객체를 매개변수로 받을 수 있습니다.
  3. 옵션(options): 세 번째 매개변수는 선택적으로 사용되며, 이벤트 리스너의 동작을 제어하는 객체입니다. 예를 들어, {capture: true, once: true, passive: true}와 같은 속성을 포함할 수 있습니다.
    • capture: 이벤트 캡쳐 단계에서 이벤트 리스너를 활성화할지 여부를 결정합니다.
    • once: 이벤트 리스너를 단 한 번만 실행하고 제거할지 여부를 결정합니다.
    • passive: 이벤트 리스너가 preventDefault()를 호출하지 않음을 브라우저에 알려 성능을 향상시킵니다.
  4. 이벤트 버블링 및 캡처링 제어: 이벤트 전파 방식을 제어할 수 있습니다. 이벤트 버블링은 이벤트가 하위 요소에서 상위 요소로 전파되는 것을 말하고, 이벤트 캡처링은 그 반대 방향으로의 전파를 말합니다.
  5. 다중 이벤트 핸들러: 하나의 요소에 대해 여러 이벤트 핸들러를 추가할 수 있습니다. 같은 이벤트에 대해서도 다른 함수를 여러 개 등록할 수 있습니다.
  6. 이벤트 객체: 이벤트 핸들러 함수는 이벤트에 대한 정보를 포함하는 이벤트 객체를 매개변수로 받을 수 있습니다. 이 객체를 사용하여 이벤트의 세부 정보에 접근하고, 이벤트의 기본 동작을 방지하는 등의 작업을 할 수 있습니다.
  7. 세밀한 이벤트 관리: removeEventListener를 사용하여 이벤트 핸들러를 제거할 수 있습니다. 이를 통해 더 세밀한 이벤트 관리가 가능합니다.
  8. 호환성과 크로스 브라우징: 대부분의 현대 브라우저에서 지원되지만, 오래된 브라우저에서는 지원되지 않을 수 있습니다. 이 경우 대체 메소드로 attachEvent를 사용할 수 있으나, 이는 오래된 방식입니다.

예제

클릭 이벤트 예제

HTML 요소가 클릭될 때마다 알림을 표시하는 예제입니다.

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

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

마우스 오버 이벤트 예제

마우스가 특정 요소 위에 올라갈 때 텍스트를 변경하는 예제입니다.

HTML
<div id="myDiv">마우스를 올려보세요!</div>

<script>
  document.getElementById("myDiv").addEventListener("mouseover", function() {
    this.textContent = "마우스가 위에 있습니다!";
  });
</script>
HTML

이벤트 리스너 제거 예제

이벤트 리스너를 추가한 후 특정 조건에서 제거하는 예제입니다.

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

<script>
  function myFunction() {
    alert("버튼이 클릭되었습니다!");
    // 이벤트 리스너 제거
    document.getElementById("myButton").removeEventListener("click", myFunction);
  }

  document.getElementById("myButton").addEventListener("click", myFunction);
</script>
HTML

이러한 예제들은 addEventListener의 기본적인 사용 방법을 보여줍니다. 실제 사용 시에는 다양한 이벤트와 조건, 함수 등을 조합하여 더 복잡한 동작을 구현할 수 있습니다.

결론

JavaScript에서 addEventListener는 웹 페이지의 요소에 사용자의 행동에 반응하는 이벤트를 연결하는 데 사용되는 메서드입니다. 이 메서드는 다양한 이벤트 타입을 지원하며, 이벤트 발생 시 실행할 사용자 정의 함수를 지정할 수 있습니다. 또한, 이벤트의 전파 방식을 제어하는 버블링과 캡처링을 다룰 수 있고, 한 요소에 여러 이벤트 핸들러를 추가하는 것도 가능합니다. 이벤트 핸들러는 removeEventListener를 통해 제거할 수 있으며, 대부분의 현대 브라우저에서 지원됩니다. 이러한 특성을 가진 addEventListener는 웹 개발에서 다양한 상호작용을 구현하는 데 매우 유용한 도구입니다.

suover

Recent Posts

그림으로 쉽게 배우는 자료구조와 알고리즘: 미션3 | 문서 압축 (허프만 코딩)

들어가며 소프트웨어가 처리해야 하는 데이터 양이 늘어날수록, 단순히 기능 구현만으로는 성능과 효율을 보장하기 어렵습니다. 특히…

1주 ago

만들면서 쉽게 배우는 컴퓨터 구조: 미션3 | STOREB 명령어와 A·B 비교 구현

들어가며 소프트웨어를 구현할 때 성능 최적화나 안정성을 높이려면, 단순히 고수준 코드만 신경 쓰는 것을 넘어…

1주 ago

그림으로 쉽게 배우는 자료구조와 알고리즘: 미션2 | CPU 스케줄링

들어가며 소프트웨어가 복잡해질수록, 단순히 알고리즘의 시간복잡도만으로는 모든 문제를 해결할 수 없습니다. 특히 운영체제 수준에서는 다중…

2주 ago

만들면서 쉽게 배우는 컴퓨터 구조: 미션2 | 터널 연결부터 32바이트 RAM까지

들어가며 복잡한 소프트웨어가 원활히 동작하려면 단순히 코드만 잘 짜는 것으로는 부족합니다. 트랜잭션 처리나 대규모 데이터…

2주 ago

그림으로 쉽게 배우는 자료구조와 알고리즘: 미션1 | 메모리 검색

들어가며 소프트웨어를 개발할 때 메모리 관리 방식은 프로그램의 안정성과 성능을 좌우하는 핵심 요소입니다. 특히 자바스크립트,…

3주 ago

만들면서 쉽게 배우는 컴퓨터 구조: 미션1 | 진리표부터 회로 구현까지

들어가며 소프트웨어 개발자는 코드가 어떻게 실행되는지 정확히 이해해야 할 필요가 있습니다. 우리가 작성한 프로그램은 결국…

3주 ago