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