원본: addEventListener 메소드 – 자바스크립트 이벤트 리스너 예제 코드
자바스크립트의 addEventListener() 메소드를 사용하면 버튼을 클릭하여 이벤트가 발생할 때 호출할 함수를 지정할 수 있습니다.
이 포스트에서는 addEventListener() 메소드를 사용하는 방법을 알아보겠습니다.
Table of Contents
이벤트와 이벤트 핸들러의 이해
사용자 또는 브라우저가 페이지를 조작하면 이벤트가 발생합니다. 이를 활용해 웹 페이지 요소를 동적으로 변경할 수 있으므로 이벤트는 중요한 역할을 맡고있습니다.
예를 들어 브라우저가 document 로딩을 완료하면 load 이벤트가 발생하고 사용자가 버튼을 클릭하면 click 이벤트가 발생합니다.
이벤트는 한 번, 여러 번 또는 전혀 발생하지 않을 수 있습니다. 특히 사용자가 임의 생성한 이벤트는 언제 발생하는지 모를 수도 있습니다.
이와 같은 시나리오에서 이벤트 발생을 감지하기위해 이벤트 핸들러가 필요합니다. 이를 통해 이벤트가 발생하는 즉시 반응하도록 코드를 작성할 수 있습니다.
자바스크립트에서는 addEventListener() 메소드를 사용해 이벤트 핸들러를 등록합니다.
이는 특정 HTML 요소에 이벤트를 모니터링하게 해주고 요소당 하나 이상의 핸들러를 등록할 수 있게 해줍니다.
addEventListener 문법
target.addEventListener(event, function, useCapture);target: 이벤트 핸들러를 추가하려는 HTML 요소입니다. 이 요소는 DOM의 일부입니다. 요소를 가져오는 방법을 참고하기 바랍니다.
event: 이벤트의 이름을 지정하는 문자열로 load, click 등이 있습니다. 다음의 링크는 HTML DOM event의 전체 목록입니다.
function: 이벤트 감지 시 실행할 함수를 지정합니다. 이를 통해 웹 페이지를 동적으로 변경할 수 있습니다.
useCapture: 캡쳐나 버블링 단계에서 이벤트를 실행할지 여부를 지정하는 옵셔널 불린 값 입니다. 이벤트 핸들러가 중첩된 HTML 요소에 모두 연결되어 있는 경우 이 값은 실행할 이벤트를 결정합니다. 기본 값으로 가장 안쪽의 이벤트 핸들러가 먼저 실행됨을 의미하는 false로 설정됩니다.
addEventListener 예제 코드
다음은 addEventListener() 메소드를 사용 방법을 보여주는 간단한 예제입니다.
사용자가 버튼을 클릭하면 메시지가 표시되고, 다시 버튼을 클릭하면 메시지가 숨겨집니다. 관련 코드는 다음과 같습니다:
// index.html
<link rel="stylesheet" href="styles.css">
<div class="wrapper">
<div id="message" class="hide">
버튼을 클릭하기 전에는 이 메시지를 볼 수 없습니다. 메시지를 숨기려면 한번 더 클릭해주세요
</div>
<div id="button">
클릭해주세요
</div>
</div>
<script>
let button = document.querySelector('#button');
let msg = document.querySelector('#message');
button.addEventListener('click', () => {
msg.classList.toggle('reveal');
});
</script>다음은 CSS 코드입니다:
// styles.css
.wrapper {
position: relative;
}
#button {
width: 200px;
text-align: center;
padding: 10px;
font-size: 30px;
cursor: pointer;
margin: auto;
background: #FF0;
}
#button:hover {
background: #DFF30B;
}
#message {
font-size: 26px;
margin-bottom: 30px;
text-align: center;
}
.hide {
visibility: hidden;
}
.reveal {
visibility: visible;
}위의 코드를 실행하면 다음과 같은 화면을 볼 수 있습니다:
여기서 버튼을 클릭하면 이벤트 핸들러가 작동하여 다음과 같은 화면이 나타납니다:
위 동작의 핵심 코드는 다음과 같습니다:
button.addEventListener('click', () => {
msg.classList.toggle('reveal');
});이 코드를 처음에 설명한 문법에 따라 해석하면:
- target: id=’button’인 HTML 요소
- function: 메시지를 보이거나 숨기는 데 필요한 코드를 가지는 익명 함수
- useCapture: 기본 값 false로 놔둠
이벤트 핸들러 함수는 msg 요소의 visibility를 변경하는 reveal 이라는 클래스를 토글하여 메시지를 표시하거나 숨길 수 있습니다.
물론 위의 코드를 수정하여 익명 함수를 이름이 명명된 함수로 바꿀 수도 있습니다.
이벤트를 매개변수로 전달
이벤트를 발생시킨 요소와 같이 이벤트의 자세한 정보를 알고 싶을 때가 있습니다. 이 때에는 함수가 이벤트 값을 받아야합니다.
다음의 예제는 요소의 id를 얻는 방법을 보여줍니다:
button.addEventListener('click', (e) => {
console.log(e.target.id);
});여기서 이벤트 매개변수인 e는 “event” 또는 다른 이름으로 바꿀 수 있습니다.
이 매개변수는 target.id와 같은 이벤트에 대한 다양한 정보를 가지는 객체입니다.
이러한 이벤트 객체는 자바스크립트가 알아서 처리해주기 때문에 별다른 특별한 작업이 필요한 것은 아닙니다.
이벤트 핸들러 제거
여러 가지 이유로 더 이상 이벤트 핸들러가 필요 없어지는 경우가 있습니다.
그럴 때에는 다음과 같이 이벤트 핸들러를 제거할 수 있습니다:
target.removeEventListener(event, function, useCapture);인수 목록은 addEventListener() 메소드와 동일합니다.