[javascript] 자바스크립트 이벤트 리스너 등록 (addEventListener)

참고: https://www.freecodecamp.org/news/javascript-addeventlistener-example-code/

JavaScript의 addEventListener() 메소드를 사용하면 버튼을 클릭하여 이벤트가 발생할 때 호출할 함수를 설정할 수 있습니다. 이 포스트에서는 addEventListener()를 사용하는 방법을 알아보겠습니다.

이벤트와 이벤트 핸들러의 이해

사용자 또는 브라우저가 페이지를 조작하면 이벤트가 발생합니다. 이를 사용해 웹 페이지 요소를 동적으로 변경할 수 있으므로 이벤트는 중요한 역할을 맡고있습니다.

예를 들어 브라우저가 document 로딩을 완료하면 load 이벤트가 발생하고 사용자가 버튼을 클릭하면 click 이벤트가 발생합니다.

이벤트는 한 번, 여러 번 또는 전혀 발생하지 않을 수 있습니다. 특히 사용자가 임의 생성한 이벤트는 언제 발생하는지 모를 수도 있습니다. 이러한 시나리오에서 이벤트 발생을 감지하기위해 이벤트 핸들러가 필요합니다. 이를 통해 이벤트가 발생하는 즉시 반응하도록 코드를 설정할 수 있습니다.

JavaScript는 addEventListener() 메소드로 이벤트 핸들러를 등록해줍니다. 이는 특정 HTML 요소에 이벤트를 모니터링하게 해주고 요소당 하나 이상의 핸들러를 등록할 수 있게 해줍니다.

addEventListener() 문법

target.addEventListener(event, function, useCapture)

target: 이벤트 핸들러를 추가하려는 HTML 요소입니다. 이 요소는 DOM의 일부입니다. 요소를 가져오는 방법을 참고하기 바랍니다.

event: 이벤트의 이름을 지정하는 문자열로 load, click 등이 있습니다. 링크는 HTML DOM event의 전체 목록입니다.

function: 이벤트 감지 시 실행할 함수를 지정합니다. 이를 통해 웹 페이지를 동적으로 변경할 수 있습니다.

useCapture: 캡쳐나 버블링 단계에서 이벤트를 실행할지 여부를 지정하는 옵셔널 불린 값 입니다. 이벤트 핸들러가 중첩된 HTML 요소에 모두 연결되어 있는 경우 이 값은 실행할 이벤트를 결정합니다. 기본 값으로 가장 안쪽의 이벤트 핸들러가 먼저 실행됨을 의미하는 false로 설정됩니다.

addEventListener() 코드 예제

See the Pen addEventListener by shinyks (@shinyks) on CodePen.

addEventListener() 메소드를 사용 방법을 보여주는 간단한 예제입니다. 사용자가 버튼을 클릭하면 메시지가 표시되고, 다시 버튼을 클릭하면 메시지가 숨겨집니다. 관련 JavaScript 코드는 다음과 같습니다:

let button = document.querySelector('#button');
let msg = document.querySelector('#message');

button.addEventListener('click', () => {
  msg.classList.toggle('reveal');
});

위의 addEventListener() 문법에 따라:

• target: id='button'인 HTML 요소
• function: 메시지를 보이거나 숨기는 데 필요한 코드를 가지는 익명 함수
• useCapture: 기본 값 false로 놔둠

이벤트 핸들러 함수는 메시지 요소의 visibility를 변경하는 reveal이라는 클래스를 토글하여 메시지를 표시하거나 숨길 수 있습니다. 물론 위의 코드를 수정하여 익명 함수를 이름이 명명된 함수로 바꿀 수도 있습니다.

이벤트를 매개변수로 전달

이벤트를 발생시킨 요소 같은 이벤트의 자세한 정보를 알고 싶을 때가 있습니다. 이 때에는 함수가 이벤트 값을 받아야합니다. 다음의 예제는 요소의 id를 얻는 방법을 보여줍니다:

button.addEventListener('click', (e) => {
  console.log(e.target.id);
});

여기서 이벤트 매개변수인 e는 "event" 또는 다른 이름으로 바꿀 수 있습니다. 이 매개변수는 target id 같은 이벤트에 대한 다양한 정보를 가지는 객체입니다. 이벤트 객체를 받으려면 별다른 특별한 작업이 필요한 것은 아니고 JavaScript가 알아서 처리해줍니다.

이벤트 핸들러 제거

어떠한 이유로 더 이상 이벤트 핸들러가 필요 없어지면 다음과 같이 이벤트 핸들러를 제거할 수 있습니다:

target.removeEventListener(event, function, useCapture);

매개변수는 addEventListener()와 동일합니다.

관련 글

자바스크립트 querySelector 사용 방법

자바스크립트 마우스 이벤트 (mouse event)