TIL 20220124 이벤트전파, 스코프, 호이스팅
본 포스팅은 작성자의 학습 목적으로 ⌜모던 자바스크립트 Deep Dive⌟ (이웅모 저, 위키북스), 코드캠프 강의자료, 김버그님 유튜브채널, 스택오버플로우를 참고하여 작성하였습니다.
이벤트 전파
DOM트리 상에 존재하는 DOM요소 노드에서 발생한 이벤트는 DOM트리를 통해 전파된다. 이를 이벤트 전파라고 한다.
이벤트 전파는 이벤트 객체가 전파되는 방향에 따라 3단계로 구분할 수 있다.
1️⃣ 캡처링 단계 : 이벤트가 상위 요소에서 하위 요소 방향으로 전파
2️⃣ 타깃 단계 : 이벤트가 이벤트 타깃에 도달
3️⃣ 버블링 단계 : 이벤트가 하위 요소에서 상위 요소 방향으로 전파
👉 학습에 도움이 된 영상 : 김버그님 유튜브
0️⃣ 본격적 설명에 앞서, target VS currentTarget
event.target은 이벤트를 발생시킨 요소(이벤트가 누구때문에 실행됐는가)를 반환한다. 하지만 event.currentTarget의 경우 이벤트가 바인딩된 요소(이벤트의 주인)를 반환한다.
이미지출처 - 예를 들어 위의 그림에서 child div를 클릭하였을 때, child div 입장에서 target: 이벤트를 발생시킨 요소는 child 자기 자신이고, currentTaret: 이벤트가 바인딩 된 요소또한 child이다. parent div 입장에서는 어떨까? target: 이벤트를 발생시킨 요소는 child이고, currentTarget: 이벤트가 바인딩 된 요소는 parent div이다.
1️⃣ 이벤트 캡쳐링 단계
<form conclick="alert(form)">
<div onclick="alert(div)">
<p onclick="alert(p)">P</p>
</div>
</form>위 예제에서 P를 클릭하면 클릭 이벤트가 발생하여 클릭 이벤트 객체가 생성되고 클릭된 p요소가 이벤트 타깃이 된다. 이 때 클릭 이벤트 객체는 window에서 시작해서 이벤트 타깃 방향으로 전파된다. 이것이 타깃 단계다.
2️⃣ 이벤트 타깃 단계
상위요소에서 하위요소로 전파된 이벤트가 이벤트 타깃인 p에 도달한다.
3️⃣ 이벤트 버블링 단계
이벤트 타깃에서 시작해서 부모 방향으로 전파된다. 버블링의 결과로, 우리는 p를 클릭하였어도 p→div→form 순서로 3개의 경고창이 뜨게 된다.
4️⃣ 이벤트 전파 방지
이벤트 객체의 stopPropagtion 메서드를 이용하여 이벤트 전파를 중지할 수 있다.
스코프
모든 식별자(변수 이름, 함수이름, 클래스 이름 등등..)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라 한다. 다시말해, 스코프란 식별자의 유효 범위이다.
전역에서 선언된 변수는 전역 스코프를 갖고, 지역에서 선언된 변수는 지역 스코프를 갖는다.
var : 함수 스코프를 따른다(선언된 곳과 가장 가까운 함수를 유효 범위로 가진다. 선언된 함수 전체에 걸쳐서 유효 - 호이스팅 현상 발생)
let : 블록 스코프를 따른다.(가장 가까운 블록을 유효 범위로 가진다.)
스코프체인
함수는 중첩될 수 있으므로 함수의 지역 스코프도 중첩되게 되는데 이 과정에서 슼포느는 하나의 계층적 구조로 연결된다. 이렇게 스코프가 계층적으로 연결된 것을 스코프 체인이라고 한다.
변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통하여 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하면서 선언된 변수를 검색한다. 쉽게 말해, 변수를 우선 자신이 속한 스코프에서 찾고, 속한 스코프에 없으면 상위 스코프로 다시 찾아 나간다.
이렇게 되면 상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할 수 있지만, 하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수는 없게 된다.
호이스팅
자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서 먼저 소스코드의평가 과정을 거치는데, 변수선언을 포함한 모든 포함문을 소스코드에서 찾아내 먼저 실행한다.그리고 소스코드의 평가 과정이 끝나면 선언문을 제외한 소스코드를 한 줄씩 순차적으로 실행한다.
이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라 한다.
Author And Source
이 문제에 관하여(TIL 20220124 이벤트전파, 스코프, 호이스팅), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@minimin123/TIL-20220124저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
