(JavaScript) 이벤트 버블링 / 캡처링 & 다양한 이벤트
10495 단어 JavaScriptJavaScript
이벤트 위임
- 개념
- 각 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 파일이 있는 것이 좋아보인다
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
Author And Source
이 문제에 관하여((JavaScript) 이벤트 버블링 / 캡처링 & 다양한 이벤트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@neity16/JavaScript-이벤트-버블링-캡처링
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
- 개념
- 각 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 파일이 있는 것이 좋아보인다
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
Author And Source
이 문제에 관하여((JavaScript) 이벤트 버블링 / 캡처링 & 다양한 이벤트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@neity16/JavaScript-이벤트-버블링-캡처링
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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 파일이 있는 것이 좋아보인다
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
Author And Source
이 문제에 관하여((JavaScript) 이벤트 버블링 / 캡처링 & 다양한 이벤트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@neity16/JavaScript-이벤트-버블링-캡처링
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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
Author And Source
이 문제에 관하여((JavaScript) 이벤트 버블링 / 캡처링 & 다양한 이벤트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@neity16/JavaScript-이벤트-버블링-캡처링저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)