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

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

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

3일 ago

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

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

4일 ago

웹 서버(Web Server)와 WAS(Web Application Server) 알아보기

서론 현대 웹 애플리케이션 아키텍처에서 웹 서버(Web Server) 와 웹 애플리케이션 서버(WAS, Web Application Server)…

1개월 ago

HTTP 헤더(Header)란 무엇인가?

HTTP 헤더(Header)란? HTTP(Header)는 클라이언트와 서버 간에 교환되는 메타데이터로, 요청(Request)과 응답(Response)에 부가적인 정보를 실어 나르는 역할을…

2개월 ago

인프런 워밍업 클럽 스터디 3기 – 백엔드 클린 코드, 테스트 코드 후기

Readable Code: 읽기 좋은 코드를 작성하는 사고법Practical Testing: 실용적인 테스트 가이드 강의와 함께한 인프런 워밍업 클럽…

2개월 ago

인프런 워밍업 클럽 스터디 3기 – 백엔드 클린 코드, 테스트 코드 4주차 회고

Readable Code: 읽기 좋은 코드를 작성하는 사고법Practical Testing: 실용적인 테스트 가이드 강의와 함께한 인프런 워밍업 클럽…

2개월 ago