-
브라우저가 제공하는 시스템
-
UI를 다루는 어플리케이션 입장에서는 특정UI가 사용자와 인터렉션할 때 실행해야 할 코드가있는데, 이 코드를 코드상으로 특정할 수가없다. 왜냐면 사용자가 언제 UI에 반응할지 알 수가 없으니까. 그래서 이벤트 시스템이등장함
-
addEventListener를 이용하여 어떤 DOM로드에 어떤 이벤트가 발생하면 어떤 함수 좀 호출해줘라는 등록하는 형태
-
이벤트를 등록하고 난 후에 html에 node라고하는 것이 중첩되어있음.
- 중첩된 상황에서 이벤트들이 어떻게 발생하고 어떻게 전파되는지
- 중복적으로 전파 됐을때 정확하게 어떤 노드가 이벤트를 발생시켰는지 알수있는 방법은 없는지,
- 혹은 그걸 알 수 있게 하기 위한 내부적인 메커니즘 은 없는지를 살펴봄
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>EventListener</title> <style> body {padding: 50px;} .box1 { padding: 50px; background: red;} .box2 { padding: 50px; background: blue;} .box3 { padding: 50px; background: yellow;} </style> </head> <body> <div class="box1" data-name="red"> <div class="box2" data-name="blue"> <div class="box3" data-name="yellow"> </div> </div> </div> <script src="eventListener.js" type="module"></script> </body> </html>
js
function main(){ const BUBBLING_PHASE = false; const CAPTURING_PHASE = true; const PHASE_NAME = ['NONE', 'CAPTURING', 'TARGET', 'BUBBLING'] function eventLogger({target, currentTarget, eventPhase}){ console.log(`${target.dataset.name}, ${currentTarget.dataset.name}, ${PHASE_NAME[eventPhase]}`) } let divs = document.querrySelectorAll('div'); divs.forEach(div => div.addEventListener('click', eventLogger, BUBBLING_PHASE)); } document.addEventListener('DOMContentLoaded', main);
- document.addEventListener('DOMContentLoaded', main);
DOMContentLoaded : Html 문서가 모두 완료되고 DOM만들어진 다음에 발생하는 이벤트- main 함수코드에는 eventLogger 함수(이벤트 핸들러)가 있고
let divs = document.querrySelectorAll('div')모든 div태그가져옴.
가지고온 divs에 forEach로 각각에 대해서 모두 addEventListener로 click이벤트를 연결
addEventListener의 3번째 인자(BUBBLING_PHASE)는 이벤트가 중첩됐을때 어떻게 전파될 것인가를 결정하는 옵션
(기본적으로 BUBBLING_PHASE - false, CAPTURING_PHASE - true 값을 가진다.)
모든 divs에 모든 div를 가져왔기때문에 div 모두 eventLogger를 이벤트 핸들러로 등록됨
eventLogger에 console.log를 찍고있고, 이벤트 시스템이 던져주는 이벤트 객체가 넘어오는데 그 중 target과 currentTarget을 추출해서 씀
console.log에는 html에 지정해둔 name값을 찍어줌
(target.dateset인지, currentTarget.dataset인지)
버블링이벤트(안쪽에서 바깥쪽으로 이벤트가 전파됨)
예) yellow 클릭
yellow yellow TARGET
yellow blue BUBBLING
yellow red BUBBLING
예) blue 클릭
blue blue TARGET
blue red BUBBLING
예) red 클릭
red red TARGET
이벤트는 항상 TARGET에 걸려있고, 버블링 되서내려오는 것(직접적이아니라)은 currentTarget에 걸려있다. PHASE_NAME은 타켓인지 버블링인지 확인해주는것 어떤 이벤트를 캡쳐해서 작동을 시킬것인지를 전략적 생각필요
캡쳐링 이벤트(맨 바깥에서부터 이벤트가 발생해서 안쪽으로 전파됨)
예) yellow 클릭 yellow red CAPTURING
yellow blue CAPTURING
yellow yellow TARGET
예) blue 클릭
blue red CAPTURING
blue blue TARGET
예) red 클릭 red red TARGET
- 이벤트 루프 (참고동영상) 성능이슈낫을 때 중요함
https://www.youtube.com/watch?v=8aGhZQkoFbQ
열린 마음의 개발자가 되려합니다