LearnFit

 YouTube, 자바스크립트 DOM & EVENT #6 이벤트 버블링, 이벤트 위임

서원석님의 학습노트

자바스크립트 DOM & EVENT #6 이벤트 버블링, 이벤트 위임

#전체

#개발자

#프론트엔드

#자바스크립트

#javascript

#js

#es6

#강좌

#tutorial

#중급

#intermediate

#dom

#event

#돔

#이벤트

#parentNode

#childNodes

#firstChild

#lastChild

#previousSibling

#nextSibling

#parentElement

#children

#firstElementChild

#lastElementChild

#previousElementSibling

#nextElementSibling

#appendChild

#insertBefore

#createElement

#createTextNode

#버블링

#bubbling

#위임

00:48click 이벤트에 대해 이벤트 버블링이 발생합니다.

01:07하위 요소에서 발생한 이벤트가 상위 요소를 향해 연쇄적으로 발생합니다. *이벤트 버블링이 발생하면 동일한 이벤트 객체를 각 이벤트 핸들러의 인자로 넘깁니다.

01:29버블링 되지 않는 이벤트 타입들과 대처법

03:02이벤트 버블링을 멈추는 법 *stopPropagation을 사용해서 인위적으로 이벤트 버블링을 막는 것은 권장되지 않습니다.

03:47이벤트 위임을 통해 자신에게 일어난 이벤트를 다른 요소에서 처리할 수 있습니다.

04:354개의 li에게 event handler를 전달한 현재 방식은 추후 li 갯수가 늘어나는 것에 대응하기 적절치 않습니다. 이를 li들의 부모 요소인 ul에 이벤트 위임하는 방식으로 해결합니다.

06:34currentTarget은 이벤트 핸들러가 등록된 요소를 나타내며 target은 이벤트를 발생시키는 요소입니다. *event.currentTarget 값은 이벤트를 처리하는 동안에만 사용할 수 있습니다. console.log() 이벤트 개체를 변수에 저장한 다음 콘솔에서 currentTarget 키를 찾으면 해당 값은 null이 됩니다.(from MDN)

✔ 학습 완료

취소

작성하기

이런 러닝패스는 어때요?

무료

박어진

의 러닝패스

Adaptive Learning이란 무엇이고 어떤 서비스들이 있나?

서원석님의 다른 노트는 어때요?

서원석

의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

Video

⏱ 핵심 스탬프

25개

00:01

이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)

00:25

코드 살펴보기 시작

👍

서원석

의 학습노트

리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현

Video

⏱ 핵심 스탬프

8개

00:00

해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다. 공식 문서: https://reactrouter.com/

00:50

react router 버전5에서 redirect를 구현하는 방법입니다. *예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨 *특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.

👍

다시 보지않기