자바스크립트에서 이벤트 처리를 위해 사용되는 여러 가지 함수가 있습니다. 이러한 함수들은 이벤트를 감지하고 처리하는 데 도움을 줍니다. 이번 포스팅에서는 주요 이벤트 처리 함수들을 정리해 보겠습니다.

1. addEventListener()

addEventListener() 함수는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정합니다.

element.addEventListener(event, function, useCapture);

• event: 이벤트 타입을 지정합니다.
• function: 호출할 함수를 지정합니다.
• useCapture: 이벤트를 캡처링(false) 또는 버블링(true)할지 여부를 지정합니다.

예시:

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

2. removeEventListener()

removeEventListener() 함수는 이벤트 리스너를 제거합니다.

element.removeEventListener(event, function, useCapture);

• event: 제거할 이벤트 타입을 지정합니다.
• function: 제거할 함수를 지정합니다.
• useCapture: 이벤트 캡처링(false) 또는 버블링(true) 여부를 지정합니다.

예시:

var myFunction = function(){
  alert("Hello World!");
}
document.getElementById("myBtn").addEventListener("click", myFunction);
// 나중에 이 리스너를 제거하려면
document.getElementById("myBtn").removeEventListener("click", myFunction);

3. event.preventDefault()

event.preventDefault() 함수는 이벤트의 기본 동작을 취소합니다. 특히, 링크 클릭 시의 기본 액션을 중지하거나, form 제출 시의 새로고침을 막는 데 유용합니다.

element.addEventListener("click", function(event){
  event.preventDefault();
});

결론

이번 포스팅에서는 이벤트 처리를 위한 주요 함수들을 살펴보았습니다. addEventListener(), removeEventListener(), 그리고 event.preventDefault() 함수는 자바스크립트를 사용하여 웹 페이지의 다양한 이벤트에 대응하는 데 사용됩니다.

더 많은 정보를 원하신다면 MDN Web Docs 를 참조해 보세요.