뒤로 가기
홈으로 이동
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)
✔ 학습 완료

이런 러닝패스는 어때요?

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

서원석의 프로필 이미지
서원석
의 학습노트

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

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
25
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

리액트 라우터 버전 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에 접근하지 못하도록 사용하는 것이죠.
👍
4
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기