자바스크립트 이벤트 객체와 리스너 addEventListener 활용법 - 자바스크립트 #8

자바스크립트의 이벤트에 대해 정리해 보겠습니다. 자바스크립트에서 이벤트에 대한 기본 개념을 쉽게 이해할 수 있도록 설명하고, 실용적인 예시 코드와 함께 자세히 학습할 수 있도록 설명하려 합니다.

자바스크립트 이벤트

자바스크립트에서 이벤트란 웹 페이지에서 발생하는 특정한 순간이나 동작을 말합니다. 예를 들어, 사용자가 버튼을 클릭하거나, 마우스를 움직이거나, 키보드를 누르는 등의 동작이 모두 이벤트에 해당합니다. 이벤트는 웹 페이지와 사용자 간의 상호작용을 가능하게 하는 중요한 요소입니다.

반응형

  이벤트 리스너 (Event Listener)

이벤트 리스너는 특정 이벤트가 발생하기를 "기다리다가" 그 이벤트가 발생했을 때 실행될 코드를 지정하는 방법입니다. 이를 통해 우리는 사용자의 동작에 반응하는 동적인 웹 페이지를 만들 수 있습니다.

 

이벤트 리스너 추가하기

이벤트 리스너를 추가하는 가장 일반적인 방법은 addEventListener 메서드를 사용하는 것입니다. 이 메서드의 기본 구조는 다음과 같습니다.

element.addEventListener(eventType, eventHandler);

여기서,

• element는 이벤트를 감지할 HTML 요소입니다.
• eventType은 감지하고자 하는 이벤트의 유형입니다 (예: 'click', 'mouseover' 등).
• eventHandler는 이벤트가 발생했을 때 실행될 함수입니다.

 

예를 들어, 버튼을 클릭했을 때 알림 창을 띄우는 코드를 작성해 보겠습니다.

<button id="myButton">클릭하세요</button> <script> let button = document.getElementById('myButton'); button.addEventListener('click', function() { alert('버튼이 클릭되었습니다!'); }); </script>

이 코드에서는,

1. HTML에 'myButton'이라는 id를 가진 버튼을 만들었습니다.
2. 자바스크립트에서 document.getElementById('myButton')을 사용해 해당 버튼 요소를 선택했습니다.
3. addEventListener 메소드를 사용해 'click' 이벤트에 대한 리스너를 추가했습니다.
4. 이벤트 핸들러 함수에서는 alert를 사용해 메시지를 표시합니다.

 

  주요 이벤트 유형

자바스크립트에는 다양한 이벤트 유형이 있습니다. 가장 흔히 사용되는 몇 가지를 살펴보겠습니다.

 

마우스 이벤트

• click: 요소를 클릭했을 때 발생
• dblclick: 요소를 더블 클릭했을 때 발생
• mouseover: 마우스 커서가 요소 위로 이동했을 때 발생
• mouseout: 마우스 커서가 요소에서 벗어났을 때 발생

<div id="myDiv" style="width: 200px; height: 200px; background-color: blue;"> 마우스를 올려보세요 </div> <script> let div = document.getElementById('myDiv'); div.addEventListener('mouseover', function() { this.style.backgroundColor = 'red'; }); div.addEventListener('mouseout', function() { this.style.backgroundColor = 'blue'; }); </script>

이 코드는,

1. 200x200 크기의 파란색 div를 만듭니다.
2. 마우스를 div 위에 올리면 (mouseover) 배경색이 빨간색으로 변합니다.
3. 마우스가 div에서 벗어나면 (mouseout) 다시 파란색으로 돌아갑니다.

키보드 이벤트

• keydown: 키를 누를 때 발생
• keyup: 키를 뗄 때 발생
• keypress: 문자 키를 눌렀을 때 발생 (더 이상 사용을 권장하지 않음)

<input type="text" id="myInput"> <p id="output"></p> <script> let input = document.getElementById('myInput'); let output = document.getElementById('output'); input.addEventListener('keyup', function(event) { output.textContent = '마지막으로 입력한 키: ' + event.key; }); </script>

이 코드는,

1. 텍스트 입력 필드와 출력용 문단을 만듭니다.
2. 사용자가 키를 입력할 때마다 (keyup 이벤트) 마지막으로 입력한 키를 표시합니다.
3. event.key를 사용해 입력된 키의 값을 얻습니다.

 

폼 이벤트

• submit: 폼이 제출될 때 발생
• change: 입력 요소의 값이 변경되었을 때 발생

<form id="myForm"> <input type="text" id="name" required> <button type="submit">제출</button> </form> <p id="result"></p> <script> let form = document.getElementById('myForm'); let nameInput = document.getElementById('name'); let result = document.getElementById('result'); form.addEventListener('submit', function(event) { event.preventDefault(); // 기본 제출 동작 방지 result.textContent = nameInput.value + '님, 환영합니다!'; }); nameInput.addEventListener('change', function() { console.log('이름이 변경되었습니다: ' + this.value); }); </script>

이 코드는,

1. 이름을 입력받는 폼을 만듭니다.
2. 폼이 제출되면 (submit 이벤트) 기본 제출 동작을 막고, 입력된 이름으로 환영 메시지를 표시합니다.
3. 이름 입력 필드의 값이 변경될 때마다 (change 이벤트) 콘솔에 로그를 출력합니다.

  이벤트 객체

이벤트가 발생하면 브라우저는 이벤트에 대한 정보를 담은 이벤트 객체를 생성합니다. 이 객체는 이벤트 핸들러 함수의 첫 번째 매개변수로 전달됩니다.

 

주요 이벤트 객체 속성

• type: 발생한 이벤트의 유형
• target: 이벤트가 발생한 요소
• currentTarget: 현재 이벤트가 발생 중인 요소 (이벤트 버블링 중에 중요)
• preventDefault(): 이벤트의 기본 동작을 취소하는 메소드
• stopPropagation(): 이벤트 버블링을 중지하는 메서드

<a href="https://www.example.com" id="myLink">링크</a> <script> let link = document.getElementById('myLink'); link.addEventListener('click', function(event) { event.preventDefault(); // 링크의 기본 동작(페이지 이동) 방지 console.log('이벤트 유형:', event.type); console.log('이벤트 대상:', event.target.tagName); alert('링크가 클릭되었지만 페이지 이동은 발생하지 않습니다.'); }); </script>

이 코드는,

1. 링크(<a> 태그)를 만듭니다.
2. 링크가 클릭되면 (click 이벤트)
   • preventDefault()를 호출하여 링크의 기본 동작(페이지 이동)을 막습니다.
   • 이벤트의 유형과 대상 요소를 콘솔에 출력합니다.
   • 알림 창을 표시합니다. 

 

  이벤트 버블링과 캡처링

이벤트 버블링과 캡처링은 이벤트가 DOM 트리를 통해 전파되는 방식을 설명합니다.

 

이벤트 버블링

이벤트 버블링은 이벤트가 발생한 요소에서 시작하여 상위 요소로 전파되는 현상입니다. 기본적으로 대부분의 이벤트는 버블링 됩니다.

<div id="outer" style="padding: 20px; background-color: yellow;"> 외부 <div id="inner" style="padding: 20px; background-color: pink;"> 내부 </div> </div> <script> let outer = document.getElementById('outer'); let inner = document.getElementById('inner'); outer.addEventListener('click', function() { console.log('외부 div 클릭'); }); inner.addEventListener('click', function() { console.log('내부 div 클릭'); }); </script>

이 코드에서 내부 div를 클릭하면,

1. 먼저 '내부 div 클릭'이 콘솔에 출력됩니다.
2. 그다음 '외부 div 클릭'이 출력됩니다.
3. 이는 이벤트가 내부 div에서 시작하여 외부 div로 "버블링"되기 때문입니다.

이벤트 캡처링

이벤트 캡처링은 버블링과 반대 방향으로 진행됩니다. 최상위 요소에서 시작하여 이벤트가 발생한 요소까지 내려갑니다. 캡처링 단계를 사용하려면 addEventListener의 세 번째 인자로 true를 전달해야 합니다.

<div id="outer" style="padding: 20px; background-color: yellow;"> 외부 <div id="inner" style="padding: 20px; background-color: pink;"> 내부 </div> </div> <script> let outer = document.getElementById('outer'); let inner = document.getElementById('inner'); outer.addEventListener('click', function() { console.log('외부 div 캡처 단계'); }, true); inner.addEventListener('click', function() { console.log('내부 div 버블링 단계'); }); outer.addEventListener('click', function() { console.log('외부 div 버블링 단계'); }); </script>

이 코드에서 내부 div를 클릭하면,

1. '외부 div 캡처 단계'가 먼저 출력됩니다.
2. 그다음 '내부 div 버블링 단계'가 출력됩니다.
3. 마지막으로 '외부 div 버블링 단계'가 출력됩니다.

이는 이벤트가 먼저 캡처 단계에서 외부에서 내부로 전파된 후, 다시 버블링 단계에서 내부에서 외부로 전파되기 때문입니다.

 

  이벤트 위임 (Event Delegation)

이벤트 위임은 여러 요소에 대해 개별적으로 이벤트 리스너를 추가하는 대신, 그들의 공통 조상 요소에 하나의 이벤트 리스너를 추가하는 기법입니다. 이는 메모리 사용을 줄이고 동적으로 추가되는 요소들에 대해서도 이벤트 처리를 가능하게 합니다.

<ul id="todoList"> <li>항목 1</li> <li>항목 2</li> <li>항목 3</li> </ul> <script> let todoList = document.getElementById('todoList'); todoList.addEventListener('click', function(event) { if (event.target.tagName === 'LI') { event.target.style.textDecoration = 'line-through'; console.log(event.target.textContent + ' 완료'); } }); // 새 항목 추가 let newItem = document.createElement('li'); newItem.textContent = '새 항목'; todoList.appendChild(newItem); </script>

이 코드는,

1. 할 일 목록(<ul>)을 만듭니다.
2. 목록 전체(<ul>)에 하나의 클릭 이벤트 리스너를 추가합니다.
3. 클릭된 요소가 <li>인 경우에만 해당 항목에 취소선을 추가하고 콘솔에 메시지를 출력합니다.
4. 새로운 항목을 동적으로 추가해도 같은 이벤트 처리가 적용됩니다.

이 방식의 장점은 각 <li>요소에 개별적으로 이벤트 리스너를 추가할 필요가 없고, 나중에 추가되는 항목에도 별도의 처리 없이 같은 기능이 적용된다는 것입니다.