[자바스크립트 24] DOM 조작 3(이벤트핸들러)

오늘은 이벤트 핸들러에 대해 물어보았다!

 

자바스크립트에서는 addEventListener()와 removeEventListener() 메서드를 사용해 이벤트 리스너를 추가하거나 제거할 수 있습니다.

 

1. addEventListener(): 이 메서드는 특정 요소에 이벤트 핸들러를 등록합니다.

그러면 해당 이벤트가 발생할 때마다 이벤트 핸들러가 실행됩니다.

 

element.addEventListener(event, function, useCapture);

 

여기서:

• event는 반응하려는 이벤트의 이름입니다(예: 'click', 'mouseover' 등).
• function는 이벤트가 발생할 때 실행할 함수입니다.
• useCapture는 선택적인 boolean 값으로, 이벤트 전파 방식을 결정합니다. true를 지정하면 캡처링을 사용하고, false나 지정하지 않으면 버블링을 사용합니다.

let btn = document.getElementById('myBtn');
btn.addEventListener('click', function() {
  alert('버튼이 클릭되었습니다!');
});

 

위 코드에서는 'myBtn' 요소가 클릭되면 alert 메시지를 표시하는 이벤트 리스너를 추가합니다.

 

// useCapture 는 일단 넘어가자.. 다음시간에

// event 종류는 참 많다. 근데 대부분 'click' 일걸...? 'touchstart', touchend' 같은것도 모바일에서 유용할듯?

// 주의 : function 자리에 익명 콜백 함수 말고 밖에서 만든 일반 함수 넣을 거면 () 쓰면 안됨.. () 까지쓰면 실행하란 뜻인데 어쩌구 아유 아무튼 안쓰면 됨!

// 밖에서 만든거 쓸라면 이렇게

function 함수다무섭지(){
  alert('니가 클릭했으니까 떳겠지')
};

let 버튼 = document.querySelector('.btn');
버튼.addEventListener('click', 함수다무섭지);
// 이렇게 쓰란 소리

 

 

2. removeEventListener(): 이 메서드는 특정 요소에서 이벤트 핸들러를 제거합니다.

element.removeEventListener(event, function, useCapture);

 

메서드의 매개변수는 addEventListener()와 동일합니다.

중요한 점은, removeEventListener()로 제거하려는 이벤트 핸들러는 원래 addEventListener()를 사용해 추가된 것과 정확히 같아야 한다는 것입니다.

이는 익명 함수로 이벤트 핸들러를 추가한 경우, 그 함수를 removeEventListener()로 제거할 수 없음을 의미합니다.

 

function handleClick() {
  alert('버튼이 클릭되었습니다!');
}

let btn = document.getElementById('myBtn');
btn.addEventListener('click', handleClick);
// 이후에 이렇게 제거할 수 있습니다.
btn.removeEventListener('click', handleClick);

 

이벤트 리스너를 통해 사용자 인터랙션, 브라우저의 변경 사항 등에 대응할 수 있으며, 웹 애플리케이션을 동적으로 만드는 데 필수적인 도구입니다.

 

이벤트 리스너를 사용하면서 몇 가지 주의사항을 알아두면 좋습니다:

1. 메모리 누수: 이벤트 리스너를 적절히 제거하지 않으면 메모리 누수가 발생할 수 있습니다. 이벤트 핸들러가 더 이상 필요하지 않은 경우에는 removeEventListener()를 사용해 제거하는 것이 좋습니다.
   // 그렇다. 남발하면 안좋음.. 반복문같은걸로 이벤트리스너 x 100만개 달아버리면 ㅠㅠ??
   
   
2. 익명 함수의 사용: 익명 함수를 이벤트 리스너로 사용하면, removeEventListener()로 이벤트 리스너를 제거할 수 없습니다. 이벤트 리스너를 나중에 제거할 가능성이 있는 경우, 익명 함수 대신 명명된 함수를 사용하는 것이 좋습니다.
   // 나중에 뭐뭐 하면 이벤트리스너 제거해주세요 라고 하고 싶으면 익명 콜백 쓰지 말라는 소리
   
   
3. 이벤트 전파(Event Propagation): 이벤트는 버블링과 캡처링이라는 두 가지 방식으로 전파됩니다. 이벤트 핸들러를 등록할 때, 이벤트 전파 방식을 고려해야 합니다. 또한, 이벤트 전파를 막기 위해 event.stopPropagation() 또는 event.stopImmediatePropagation()을 사용할 수 있습니다.
   // 이걸 활용해서 이벤트리스너 부착 횟수를 줄일 수 있다. 추후에 다뤄보자..
   
   
4. 이벤트 기본 동작: 브라우저는 일부 이벤트에 대해 기본 동작을 가지고 있습니다. 예를 들어, 클릭 이벤트가 <a> 태그에 발생하면 브라우저는 해당 링크로 이동합니다. 이런 기본 동작을 막으려면 event.preventDefault()를 사용할 수 있습니다.
   // e.preventDefault() 도 많이 쓸 것 같다..
   
   
5. this 키워드: 이벤트 핸들러 내에서 this 키워드는 이벤트가 발생한 요소를 참조합니다. 하지만, 이벤트 핸들러를 화살표 함수로 정의하면 this 키워드는 상위 범위의 this를 참조하므로 주의가 필요합니다.
   // 익명 콜백 쓰고 싶으면 화살표 함수 쓰지 말라 그거다...