Javascript를 사용하는 브라우저 환경에서 이벤트란 무엇인지, 이벤트 핸들러와 핸들러를 등록하는 방식에는 어떤 것이 있는지 알아보도록 하겠습니다. (feat. addEventListener)
이벤트란?
브라우저 환경에서 이벤트란 DOM 요소와 관련되어 발생하는 어떠한 사건들을 의미합니다.
예를 들어 다음과 같은 상황들이 있을 수 있습니다.
- 버튼을 클릭했을 때
- 브라우저 창의 크기를 조절했을 때
- 웹페이지가 로드 됐을 때
브라우저는 이 외에도 다양한 이벤트를 감지 할 수 있습니다.
Event reference | MDN
Events are fired to notify code of "interesting changes" that may affect code execution. These can arise from user interactions such as using a mouse or resizing a window, changes in the state of the underlying environment (e.g. low battery or media events
developer.mozilla.org
이벤트 핸들러(리스너)
웹 어플리케이션은 특정 요소에서 특정 이벤트가 발생했을 경우 브라우저로 부터 통지받겠다는 것과 해당 이벤트 발생 시 수행할 행동을 등록할 수 있습니다. 이때, 수행할 행동을 이벤트 핸들러라고 하고 이벤트 핸들러를 명시하는 일련의 과정을 이벤트 핸들러 등록이라고 합니다. 아래 예제코드를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<button class="btn">Click</button>
<script>
document.querySelector(".btn").addEventListener("click", function() {
console.log("Hi!"); // Hi!
});
</script>
</body>
</html>사용자가 버튼을 클릭했을 때, 콘솔창에 'Hi'를 출력하는 간단한 예제입니다. addEventListener 메서드를 사용하여 'btn' class를 가진 요소의 click 이벤트에 대해 console.log('Hi!') 라는 동작을 하는 이벤트 핸들러(함수)를 등록해 보았습니다.
이러한 이벤트 핸들러는 이벤트 발생 전에는 실행되지 않다가, 특정 이벤트가 발생했을 때 실행되는 것이 특징입니다.
이벤트 핸들러 등록 방식
이벤트 핸들러를 등록하는 방식은 크게 3가지가 있습니다.
1. 인라인 이벤트 핸들러 방식
<!DOCTYPE html>
<html>
<body>
<button class="btn" onclick="handler()">Click</button>
<script>
function handler() {
console.log("핸들러 실행");
}
</script>
</body>
</html>첫 번째 방법은 HTML 요소의 이벤트 핸들러 속성(attribute)에 직접 이벤트 핸들러를 등록하는 방식입니다.
다른 방식에 비해 이벤트 핸들러와 요소의 관계가 직관적으로 보일 수 있으나, HTML 코드와 javascript 코드는 분리하는 것이 권장됨으로 그리 좋은 방법은 아닙니다.
2. 이벤트 핸들러 프로퍼티 방식
두 번째 방법은 DOM 요소의 이벤트 핸들러 프로퍼티를 이용하여 이벤트 핸들러를 등록하는 방식입니다.
<!DOCTYPE html>
<html>
<body>
<button class="btn">Click</button>
<script>
let targetBtn = document.querySelector(".btn");
targetBtn.onclick = handler1;
targetBtn.onclick = handler2;
function handler1() {
console.log("핸들러111 실행");
}
function handler2() {
console.log("핸들러222 실행");
}
</script>
</body>
</html>이와 같은 방식은 HTML과 javascript 코드를 분리할 수 있다는 장점이 있지만, 하나의 이벤트 핸들러만 등록할 수 있다는 단점이 존재합니다. 위 코드의 경우 버튼 클릭 시 아래와 같은 결과가 나오게 됩니다.
HTML 요소와 DOM 요소?
- HTML은 우리가 html 문법을 사용하여 작성한 html 파일 자체를 의미합니다.
- DOM(Document Object Model)은 우리가 작성한 html 파일이 Javascript와 같은 프로그래밍 언어로 접근할 수 있도록 브라우저에 의해 파싱된 것 이라고 할 수 있습니다.
우선 이 정도로 알고 넘어가고 DOM에 대해선 추후에 다시 자세히 다루도록 하겠습니다!!
3. addEventListener 메서드 방식
addEventListener 메서드를 이용하여 특정 DOM 요소에 이벤트 핸들러를 등록하는 방식이며, 이벤트 핸들러 등록 방식 중 가장 권장되는 방식입니다. addEventListener는 아래 세 가지 매개변수를 가집니다.
- type : 이벤트의 타입 ex) click, load, scroll 등
- listener : type에서 지정한 이벤트 발생 시 실행할 함수, (= 이벤트 핸들러)
- useCapture(option) : capture의 사용여부(Boolean)
- 선택사항으로 필수 매개변수가 아닙니다.
- 기본값은 false, 이 경우 이벤트 버블링 단계에서 리스너를 트리거합니다.
- true로 설정할 경우 이벤트 캡처 단계에서 리스너를 트리거합니다.
addEventListener의 세 번째 매개변수(option)는 실제 'passive', 'once', 'cature'와 같은 다양한 옵션을 지원합니다. 자세한 내용을 원하시는 분은 링크를 참고해 주세요!
코드를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<button class="btn">Click</button>
<script>
document.querySelector(".btn").addEventListener("click", handler1);
document.querySelector(".btn").addEventListener("click", handler2);
function handler1() {
console.log("핸들러111 실행");
}
function handler2() {
console.log("핸들러222 실행");
}
</script>
</body>
</html>'btn' class를 가지는 button 요소에 handler1과 handler2 함수를 이벤트 핸들러로 등록했습니다. 버튼을 클릭하면 아래와 같은 결과를 확인할 수 있습니다.
2번의 이벤트 핸들러 프로퍼티 방식과 차이점이 느껴지시나요?
addEventListener를 이용할 경우에는 하나의 요소에 여러 개의 이벤트 리스너를 등록할 수 있다는 장점이 있습니다!
Javascript Event와 Event Handler, addEventListener에 대해 알아보았습니다.
다음 글에선 이벤트의 전파에 대해 예제를 통해 알아보도록 하겠습니다.
2023.01.03 - [Javascript] - [Javascript] Javascript event, 이벤트 전파란?
[Javascript] Javascript event, 이벤트 전파란?
지난 글에 이어 Javascript Event, 그중에서도 이벤트의 전파에 대해 알아보겠습니다. 2023.01.02 - [Javascript] - [Javascript] Javascript event, Event Handler란 무엇인가 [Javascript] Javascript event, Event Handler란 무엇인
do-it-bobby.tistory.com
'Javascript' 카테고리의 다른 글
| Javascript 실행 컨텍스트, 호이스팅, 클로저의 이해(2) (0) | 2023.02.11 |
|---|---|
| Javascript 실행 컨텍스트, 호이스팅, 클로저의 이해(1) (0) | 2023.02.09 |
| 자바스크립트 반복문 forEach, for-in, for-of 비교 (1) | 2023.01.25 |
| Javascript 이벤트 위임 패턴, 이벤트 전파 중단 (0) | 2023.01.19 |
| [Javascript] Javascript event, 이벤트 전파란? (0) | 2023.01.03 |
댓글