2023/12/07 3

버블링, 캡쳐링

[ 버블링 ] 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작하며 가장 최상단의 조상 요소를 만날때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작함 즉 이벤트 버블링은 HTML에서 이벤트가 발생했을 때, 해당 요소에서 이벤트가 처리된 후 상위 요소로 이벤트가 전파되는 현상을 의미 ▶ 예시 FORM DIV P 가장 안쪽의 p태크를 클릭하게 되면 에 할당된 onclick 핸들러가 동작 바깥의 에 할당된 핸들러가 동작 그 바깥의 에 할당된 핸들러가 동작 document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작 p태그를 누르게 되면 p → div → form 순서로 3개의 얼럿 창이 뜨게 됨 ▶ 버블링의 이벤트 위임 이벤트..

CS/프로그래밍 2023.12.07

클로저

클로저는 함수와 함수가 선언된 어휘적 환경(Lexical Environment)의 조합 즉 함수 안에 함수를 선언한 환경에서의 관계를 의미함 해당 함수안에 함수를 선언한 환경은 내부 함수에서 외부 함수로 지역변수를 접근할 수 있지만 외부 함수의 실행이 끝나고 외부 함수가 소멸된 이후에도 내부 함수가 외부 함수의 변수에 접근할 수 있는 것을 의미함 자바스크립트는 함수를 리턴하고 리턴되는 함수가 클로저를 형성하기 때문에 접근이 가능함 클로저는 반환된 내부함수가 자신이 선언되었을때의 환경(Lexical Environment)에서의 스코프를 기억하기 때문에 접근이 가능함 function outerFn() { let x = 10; return function innerFn(y) { // innerFn 함수는 클로..

CS/프로그래밍 2023.12.07

this

개요 this의 정의 함수호출방식과 this 바인딩 this의 정의 Javascript의 예약어로써 함수의 호출 방식에 따라 this에 바인딩되는 객체가 달라진다. 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다 Javascript엔진에 의해 암묵적으로 생성 ( + 호출시 내부에 인자와 this가 전달된다) 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다. (참조 변수이기때문에) 지역변수처럼 사용 가능 느낌상 객체 내부에서 사용하는 것을 많이 떠올리게 된다. value라는 값을 가지고 있는 객체에 foo라는 함수를 할당하려할 때 그 함수에서 value를 사용하려 할 때 th..

CS/프로그래밍 2023.12.07