이벤트 위임

• 개념
  • 각 dom에 이벤트를 바인딩 하는 것이 아니라, 공통의 부모 요소에 이벤트를 위임해서 중복을 줄이는 방식
  • 동적으로 생기거나 동작되는 경우 이벤트 위임으로 이벤트를 만들어서 처리할 수 있다
• 원하는 element 선택 방법
  • 이벤트 활성화를 원치 않는 element의 css에 pointer-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- 로 지정한 커스텀 속성은 getAttribute나 dataset을 통해 접근 가능

<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 는 이벤트 핸들러가 수행되는 대상을 가리킴
• 버블링은 모든 브라우저에서 지원 -> 사실상 이벤트 전파에서 버블링을 사용

• addEventListener의 3번째 인자에는 false 값이 들어가야 한다
  (default value가 false니까 지정하지 않아도 O)

• 버블링으로 실행된 핸들러의 event.eventPhase 값은 3
  (가장 말단의 element에서는 event.eventPhase 값은 1)

• event.stopPropagation() 을 통해서 이벤트 전파를 막을 수 있다

이벤트 캡처링

• parent에서 child 방향으로 이벤트가 전파되는 현상
  • 캡처링으로 실행된 핸들러의 event.eventPhase 값은 1
• 가장 상위에 있는 node에서 하위의 node로 이벤트가 전파된다
• 캡처링은 과거 IE에서 지원하지 않아서, 호환성 때문에 왠만하면 사용하지 않음
  -> 이벤트 흐름만 알아두자

• addEventListener의 3번째 인자는 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 파일이 있는 것이 좋아보인다

• ref : https://ko.javascript.info/onload-ondomcontentloaded

focus/blur vs focusin/focusout

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

• ref
  • https://mygumi.tistory.com/321

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

• https://www.youtube.com/watch?v=-fFNuNsR8q4&t=1051s
• https://ko.javascript.info/event-delegation