자바스크립트 이벤트 리스너에 대해 알아보자

이벤트 리스너란?

자바스크립트에서 이벤트 리스너는 사용자의 액션에 반응하는 코드를 작성하는 방법입니다. 예를 들어, 버튼을 클릭하거나 마우스를 움직이는 등의 동작을 사용자가 할 때 이벤트 리스너가 작동하여 그에 맞는 코드를 실행합니다.

이벤트 리스너는 `addEventListener()` 메서드를 사용하여 요소에 연결할 수 있습니다. 이 메서드는 이벤트 이름과 실행될 함수를 인자로 받습니다.

const button = document.querySelector('#myButton');

button.addEventListener('click', function() {
  alert('Button clicked!');
});

위의 코드는 ID가 `myButton`인 요소를 찾아 클릭 이벤트가 발생하면 `alert()`를 실행합니다.

이벤트 버블링

이벤트 리스너가 여러 요소에 등록될 경우, 이벤트 버블링으로 인해 하위 요소에서도 상위 요소의 이벤트 리스너가 실행됩니다. 이는 `event.stopPropagation()` 메서드를 사용하여 막을 수 있습니다.

const parent = document.querySelector('.parent');
const child = document.querySelector('.child');

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

child.addEventListener('click', function(event) {
  event.stopPropagation();
  alert('Child clicked!');
});

위의 코드에서, `child`를 클릭할 때 `stopPropagation()`이 실행되어 하위 요소의 `click` 이벤트를 막습니다.

이벤트 위임

이벤트 위임은 여러 요소에 이벤트 리스너를 등록하는 대신 하나의 상위 요소에 등록하여 작업을 수행하는 방법입니다. 이는 요소를 추가하거나 제거할 때 코드 변경을 최소화하고 메모리 사용을 줄일 수 있습니다.

const parent = document.querySelector('.parent');

parent.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    event.target.classList.toggle('active');
  }
});

위의 코드는 `parent` 요소 하위의 `li` 요소를 클릭했을 때 `active` 클래스를 토글합니다.

결론

이벤트 리스너는 자바스크립트에서 대화형 웹 페이지를 만드는 데 필수적인 기능입니다. `addEventListener()` 메서드를 사용하여 요소에 리스너를 등록하고, 이벤트 버블링과 이벤트 위임을 사용하여 코드 작성을 최적화 할 수 있습니다.

키워드: 자바스크립트 이벤트 리스너, 이벤트 등록, 이벤트 버블링, 이벤트 위임.