🔥 [UIUX] 0203 JAVASCRIPT Coding, 코딩 초급~고급 18

✏️ 2025. 02월 03일 / javascript 초급~고급 18

💡 addEventListener()메서드
앞에서 배운 이벤트 핸들러는 한 요소에 하나의 이벤트 핸들러만 연결할 수 있었습니다.
하지만 검색창의 돋보기 버튼 처럼 click과 enter 이벤트를 함께 연결해야할 경우
addEventListener()메서드를 사용할 수 있습니다.
즉, 하나의 요소에 여러개의 이벤트를 연결하고자 할 경우 사용합니다.

      [기본형]
      요소.addEventListener('이벤트명', 함수(핸들러), 캡쳐 여부);
      - 이벤트명 : 이벤트의 유형을 지정합니다.
                  단, click이나 keydown처럼 on이라는 키워드는 쓰지 않습니다.
      - 함수 : 이벤트가 발생하면 실행할 명령이나 함수를 입력합니다.
                여기에서 함수를 정의할 때에는 event 객체를 인수로 받습니다.
                매개변수 자리에 이벤트 객체가 생성됩니다.
      - 캡쳐 여부 : 이벤트를 캡쳐할지 여부를 지정하며, 기본값은 false이고
                    true나 false 중 선택할 수 있습니다.
                    true면 캡쳐링, false면 버블링하겠다는 의미입니다.
                    이벤트의 캡쳐링은 DOM의 부모노드에서 자식노드로 이벤트를 전달하는 것이고,
                    버블링의 DOM은 자식노드에서 부모노드로 이벤트를 전달하는 것을 말합니다.
                    만약 버블링할 경우 이 자리는 생략이 가능합니다.

🛁 버블링과 캡쳐링
버블링이란 DOM의 자식노드에서 부모노드로 이벤트를 전달하는 것을 말하며,
기본값으로 들어가 있는 기능입니다.
단, 모든 이벤트가 전부 버블링되는 것은 아닙니다.
캡쳐링은 반대로 DOM의 부모노드에서 자식노드로 이벤트를 전달하는 것을 말하며,
기본값은 false로 캡쳐링이 되지 않고,
addEventListenener의 마지막 인자값 자리에 true를 넣었을 경우에만 발생합니다.
💦 버블링
버블링의 원리는 아주 간단합니다.
한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고
이어서 부모요소의 핸들러가 동작합니다.
가장 최상위에 있는 조상 요소를 만날때까지이 과정이 반복되면서
요소 각각에 할당된 핸들러가 동작합니다.
⭐ event.target
부모요소의 핸들러는 이벤트가 정확히 어디에서 발생했는지에 대한 정보를 얻을 수 있습니다.
이벤트가 발생한 가장 안쪽의 요소는 target 요소라고 부르고
event.target을 사용하여 접근할 수 있습니다.
-
event.target은 this(= event.currentTarget)와 아래와 같은 차이점이 있습니다.
- event.target은 실제 이벤트가 시작된 '타켓'요소 입니다.
버블링이 진행되어도 변하지 않습니다.
- this는 '현재 요소', 현재 실행중인 핸들러가 할당된 요소를 뜻합니다.
⛔ 버블링 중단하기
이벤트 버블링은 타겟 이벤트에서 시작해서 html 요소를 거쳐
document객체를 만날때까지 각 노드에서 모두 발생합니다.
몇몇 이벤트는 window 객체까지 거슬러 올라가기도 합니다.
이때 모든 이벤트 핸들러가 실행됩니다.
그런데 핸들러에게 이벤트를 완전히 처리한 이후에 버블링을 중단하도록 명령할 수 있습니다.
event.stopPropergation()매서드를 사용하면 됩니다.
📷 캡처링
이벤트에는 버블링 이외에도 캡처링(capturing)이라는 흐름이 존재합니다.
실제 코드에서 자주 쓰이지는 않지만 종종 유용한 경우가 생깁니다.
표준 DOM 이벤트 흐름에는 3단계가 있습니다.
1. 캡처링 단계 = 이벤트가 하위요소로 전파되는 단계
2. 타켓 단계 = 이벤트가 실제 타켓 요소에 전달되는 단계
3. 버블링 단계 = 이벤트가 상위 요소로 전파되는 단계
캡쳐링은 이벤트리스너의 마지막 인수자리에 true를 설정하면 진행됩니다.
이때 최상위 요소부터 타겟 요소까지 순차적으로 아래로 내려오며 이벤트를 실행시킵니다.

      [기본형]
      요소.addEventListener('이벤트명', 함수, true)
      또는
      요소.addEventListener('이벤트명', 함수, {capture : true})

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)