(JavaScript) 이벤트 버블링 / 캡처링 & 다양한 이벤트

10495 단어 JavaScriptJavaScript

이벤트 위임

  • 개념
    • 각 dom에 이벤트를 바인딩 하는 것이 아니라, 공통의 부모 요소에 이벤트를 위임해서 중복을 줄이는 방식
    • 동적으로 생기거나 동작되는 경우 이벤트 위임으로 이벤트를 만들어서 처리할 수 있다
  • 원하는 element 선택 방법
    • 이벤트 활성화를 원치 않는 elementcsspointer-events 사용
    • event.target으로 원하는 element 찾을 때 까지 반복
.btn-label {
  pointer-events: none;
}
  const menu = document.querySelector('.menu');
  function clickHandler(event) {
    let = elem = event.target;
    while(!elem.classList.contains('menu-btn')){
      elem = elem.parentNode;
      // body의 부모인 html을 넘어서면 classList 속성이 없어서 오류 발생 
      if(elem.nodeName == 'BODY'){
        elem = null;
        return;
      }
    }
  }
  menu.addEventListener('click', clickHandler);

  • event.currentTarget / this 는 이벤트를 적용한 대상
  • event.target 은 실제 사용자가 이벤트를 발생시킨 대상
/* div에 click 이벤트 지정 후 button을 클릭하면 ?
   -> currentTarget : div 태그
   -> target : button 태그 (이미지나 글자 클릭시 img나 span이 된다) */
<div>
  <button>
    <img />
    <span></span>
  <button>
</div>

  • 태그에 data- 로 지정한 커스텀 속성getAttributedataset을 통해 접근 가능
<div class="menu-btn" data-value="3">test</div>
<sciprt>
  const menu = document.querySelector('.menu');
  function clickHandler(event) {
    // event.target.getAttribute('data-value');
    event.target.dataset.value
  }
</script>

이벤트 버블링

  • child에서 parent 방향으로 이벤트가 전파되는 현상
    • 같은 종류의 event가 전파되는 것
    • event.target은 실제 사용자가 이벤트를 발생시킨 대상
    • event.currentTarget / this 는 이벤트 핸들러가 수행되는 대상을 가리킴
  • 버블링은 모든 브라우저에서 지원 -> 사실상 이벤트 전파에서 버블링을 사용
  • addEventListener3번째 인자에는 false 값이 들어가야 한다
    (default valuefalse니까 지정하지 않아도 O)
  • 버블링으로 실행된 핸들러의 event.eventPhase 값은 3
    (가장 말단의 element에서는 event.eventPhase 값은 1)
  • event.stopPropagation() 을 통해서 이벤트 전파를 막을 수 있다

이벤트 캡처링

  • parent에서 child 방향으로 이벤트가 전파되는 현상
    • 캡처링으로 실행된 핸들러의 event.eventPhase 값은 1
  • 가장 상위에 있는 node에서 하위의 node로 이벤트가 전파된다
  • 캡처링은 과거 IE에서 지원하지 않아서, 호환성 때문에 왠만하면 사용하지 않음
    -> 이벤트 흐름만 알아두자
  • addEventListener3번째 인자use capturing을 나타내는 변수
  /* true일 경우 캡처링 활성화
     false일 경우 캡처링 비활성화 */
  menu.addEventListener('click', clickHandler, true);

다양한 이벤트

load vs DOMContentLoaded

  • 공통점
    • html 의 콘텐츠가 로딩되었을 때 발생하는 이벤트
  • 차이점
    • load
      • 이미지 파일 / css style외부 자원의 로딩까지 완료된 후에 발생
    • DOMContentLoaded
      • 브라우저가 HTML 코드를 읽고, DOM 트리를 완성하는 즉시 발생
      • 이미지 파일 / css style 파일 등의 로딩은 기다리지 않는다
  • 추가 정보
    • 보통 head에 script파일을 위치시키면 이러한 이벤트가 필요
      (SPA는 논외니까 제외)
    • 하지만, 사용자 입장에서 브라우저가 script를 읽는 동안 html은 보이지 않기 때문에 조금 더 늦게 보여지게 된다고 한다
      -> 이러한 이유로 html 코드 아래에 script 파일이 있는 것이 좋아보인다

focus/blur vs focusin/focusout

  • 공통점
    • Element가 focus를 얻거나, 잃었을 때 발생하는 이벤트
  • 차이점
    • focus / blur
      • 이벤트 버블링 발생 X
    • focusin / focusout
      • 이벤트 버블링 발생 O

DOM 조작

  • document.querySelector(선택자) 는 매우 유용하다
    • 특정 하위 element에 쉽게 접근 가능
    • ex) document.querySelector('.box btn span')
  • class 추가 / 삭제 / 존재여부
    • Element.classList.add()
    • Element.classList.remove()
    • Element.classList.contains()
  • element 추가
    • Element.appendChild() : Node 객체 하나만 추가 가능
    • Element.append() : Node 객체와 DOMString(text) 여러개 추가 가능
    • ref : https://webruden.tistory.com/634

ref

좋은 웹페이지 즐겨찾기