브라우저에서는 특정 사건(버튼 클릭, 마우스 스크롤 등)이 발생하면 이벤트를 발생시킨다. 이 때 브라우저가 이벤트를 감지하면 어떤 함수를 수행하도록 이벤트 핸들러를 등록할 수 있다. 그러면 사용자는 애플리케이션과 상호작용이 가능해진다. 이러한 방식의 프로그래밍을 이벤트 드리븐 프로그래밍 이라고 한다.
이벤트 핸들러 등록 방식
이벤트 핸들러 어트리뷰트 방식
<!DOCTYPE html>
<html>
<body>
<button onclick="handleClick()">버튼</button>
<script>
handleClick = () => console.log('Click');
</script>
</body>
</html>
함수 호출문을 할당하여 이벤트 핸들러로 등록한다. 이 경우에는 HTML과 자바스크립트가 섞여있기 때문에 관심사를 분리하기 어렵다는 단점이 있다. 하지만 React/Vue/Angular와 같은 SPA라이브러리에서 이러한 어트리뷰트 방식으로 이벤트를 처리하는 데, HTML, CSS, 자바스크립트 모두 뷰를 구성하기 위한 구성요소로 보기 때문이다.
이벤트 핸들러 프로퍼티 방식
<!DOCTYPE html>
<html>
<body>
<button>버튼</button>
<script>
const $btn = document.querySelector('button');
$btn.onclick = () => console.log('click!');
</script>
</body>
</html>
이러한 이벤트 핸들러 프로퍼티 방식에는 단 하나의 이벤트 핸들러만 바인딩 가능하여, 두 개 이상의 이벤트 핸들러를 등록하면 맨 나중에 할당된 하나만 실행된다.
addEventListener 메서드 방식
<!DOCTYPE html>
<html>
<body>
<button>버튼</button>
<script>
const $btn = document.querySelector('button');
$btn.addEventListener('click',()=>console.log('click'));
</script>
</body>
</html>
첫번째 인수에는 'on'을 제외한 이벤트 타입을 명시하고, 2번째 인수에는 호출될 함수, 3번째 인수에 true를 설정하면 캡처링 단계에서 이벤트를 캐치할 지 이벤트 전파 단계를 설정할 수 있다.
이벤트 핸들러를 여러개 등록할 수 있고, 이 경우 등록된 순서대로 모두 호출된다.
이벤트 전파
- 캡처링 단계 : 이벤트 객체가 생성되면 window부터 이벤트 타깃 방향인 하위 요소 방향으로 이벤트가 전파된다.
- 타깃 단계 : 이벤트가 이벤트를 발생시킨 타겟에 도달한다.
- 버블링 단계 : 이벤트가 이벤트 타깃부터 window까지 상위 요소 방향으로 전파된다.
이벤트 핸들러 어트리뷰터, 프로퍼티 방식으로 등록한 이벤트 핸들러는 타깃, 버블링 단계의 이벤트만 캐치 가능하지만, addEventListener 메서드 방식으로 등록한 이벤트 핸들러는 캡처링, 타깃, 버블링 모든 단계에서 이벤트 캐치가 가능하다.
이벤트 기본 동작 중단
preventDefault 메소드를 사용하면 기본 동작을 중단시킬 수 있다. <a href=""> 태그에 링크를 삽입한 후에, e.preventDefault를 사용하면 링크를 클릭해도 링크 이동이 되지 않도록 할 수 있다.
이벤트 전파 방지
stopPropagation메서드를 사용하면 하위 요소를 개별적으로 처리하기 위해서 이벤트 전파를 중단시킬 수 있다.
* 모던 자바 스크립트 Deep Dive 20장을 정리한 내용입니다.
'책정리 > Deep Dive Javascript' 카테고리의 다른 글
| async, await는 Promise는 제너레이터의 조합이다 (0) | 2023.12.13 |
|---|---|
| 자바스크립트, html로 짠 코드가 브라우저에서 렌더링되는 과정 (0) | 2023.12.03 |
| 자바스크립트의 배열은 알고보니 객체였다? (0) | 2023.12.02 |
| 자바스크립트 클래스 사용 방식 및 특징 (1) | 2023.11.30 |
| 자바스크립트 this 동적 바인딩 총정리 (0) | 2023.11.27 |