이벤트 등록
addEventListener()
웹 애플리케이션에서 사용자의 입력을 받기 위해 필요한 기능
그렇다면 브라우저는 어떻게 이벤트의 발생을 감지했을까?
이벤트 전파
Event Porpagation
이벤트 전파는 DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트가 이벤트를 통해 전파되는 것을 말함
예를 들어서 <ul> 태그 안에 <li> 태그들이 있고 해당 <li> 태그를 클릭하면 클릭 이벤트가 발생한다고 가정
클릭 이벤트가 발생하면 이벤트 객체가 생성되고 해당 객체는 이벤트 타킷을 중심으로 DOM 트리를 통해 전파
=> 부모 노드가 자식 노드에서 발생한 이벤트를 감지 가능, 부모 노드에서도 발생한 이벤트를 자식노드에서 감지하는 것도 가능
이벤트 전파는 이벤트 객체가 전달되는 방향에 따라 3단계로 구분
- 캡쳐링 단계 : 이벤트가 상위 요소에서 하위 요소 방향으로 전파되는 단계
- 타겟 단계 : 이벤트가 이벤트 타겟에 도달했을 때 이벤트가 처리되는 단계
- 버블링 단계 : 이벤트가 하위 요소에서 상위 요소 방향으로 전파되는 단계
이벤트 버블링
특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성
<body>
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
</body>var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
div.addEventListener('click', logEvent);
});
function logEvent(event) {
console.log(event.currentTarget.className);
};해당 코드를 실행하고 three div를 누르면 로그에 three, two, one를 순서대로 확인 가능
브라우저가 상위 요소로 이벤트를 전파 시키기 때문이지...!
하지만 만약 이벤트가 특정 태그에만 있다면 위와 같은 동작 결과는 확인 할 수 없음
이벤트 캡쳐
이벤트 캡쳐는 addEventListener() API의 옵션 객체에 capture:true를 설정해야 함
=> default는 false
var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
div.addEventListener('click', logEvent, {
capture: true
});
});
function logEvent(event) {
console.log(event.currentTarget.className);
};
이벤트 캡쳐를 사용하면 상위요소에서 하위요소로 이벤트가 전달되기 때문에 아까랑은 반대로 로그가 찍힘
event.stopPropagation()
이벤트 전달 방식을 반드시 신경 써야 할까...?
stopPropagation()을 이용하면 해당 이벤트가 전파되는 것을 막음
이벤트 캡쳐의 경우에도 클릭한 요소의 최상위 요소의 이벤트만 동작시키고 하위 요소들로 이벤트를 전달하지 않음
상단의 예제 코드에 event.stopPropagation()을 찍어본다면 각각 three, one 만 로그에 찍히겠죠
이벤트 전파의 예외사항
- 포커스 이벤트 : focus / blur
- 리소스 이벤트 : load / unload / error
- 마우스 이벤트 : mouseenter / mouseleave
위의 이벤트들은 이벤트 객체의 공통 프로퍼티인 event.bubbles의 값이 false이기 때문에 버블링이 안됨
단, 버블링만 안되는거지 이벤트 전파 자체는 일어나니까 캡쳐링 단계의 이벤트를 캐치하면 된다!!
이벤트 위임
여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 방법
=> 이벤트는 상위 DOM에서도 캐치할 수 있으니까 여러개의하위 DOM 요소에 이벤트 핸들러를 등록할 필요가...?
이벤트 위임 시 주의사항
이벤트를 발생시킨 객체와 이벤트 핸들러가 바인딩 된 객체가 다를 수 있음을 명시
=> 이벤트 타깃과 이벤트 핸들러가 바인딩 된 객체를 구분하고 이벤트 처리가 필요한 요소에 한정하여 이벤트 핸들러가 실행되도록 처리해야...!
'FE Study' 카테고리의 다른 글
| [FE] JavaScript 동작원리 (1) | 2024.08.09 |
|---|---|
| [FE] Debounce와 Throttle (0) | 2024.08.02 |
| [FE] Border vs Outline (0) | 2024.08.02 |
| [FE] Flex vs Grid (0) | 2024.07.28 |
| XSS (0) | 2024.07.15 |
