1. 이벤트 버블링(Event Bubbling)
이벤트 버블링은 HTML 요소에서 이벤트가 발생했을 때 그 이벤트가 해당 요소에서부터 상위 요소들로 전파되는 과정을 말합니다. 예를 들어, 클릭 이벤트가 <button> 요소에서 발생했다면, 이 이벤트는 부모 요소인 <div>, 그 부모 요소인 <body>, 그리고 최상위 요소인 <html> 순으로 전파됩니다. 이를 통해 상위 요소에서도 이벤트를 감지하고 처리할 수 있습니다.
2. 이벤트 캡쳐링(Event Capturing)
이벤트 캡쳐링은 이벤트가 상위 요소에서 하위 요소로 전파되는 과정을 의미합니다. 즉, 이벤트가 최상위 요소에서부터 시작하여 실제 이벤트가 발생한 요소까지 내려옵니다. 이벤트 리스너를 추가할 때 capture 옵션을 true로 설정하면 이벤트 캡쳐링 단계에서 해당 리스너가 호출됩니다.
3. 이벤트 위임(Event Delegation)
이벤트 위임은 하나의 상위 요소에서 이벤트 리스너를 설정하여 하위 요소들의 이벤트를 처리하는 방법입니다. 이는 동적으로 추가되는 요소들에도 이벤트를 쉽게 적용할 수 있어 성능 향상과 코드 간결화에 도움이 됩니다.
1. 전역 컨텍스트에서의 this
전역 컨텍스트에서 this는 전역 객체를 가리킵니다. 브라우저 환경에서는 window 객체가 됩니다.
2. 객체 메서드에서의 this
객체의 메서드 내에서 this는 그 메서드를 소유한 객체를 가리킵니다.
3. 함수에서의 this
일반 함수 내에서 this는 호출 방식에 따라 달라집니다. 엄격 모드에서는 undefined가 되며, 비엄격 모드에서는 전역 객체를 가리킵니다.
4. 생성자 함수에서의 this
생성자 함수 내에서 this는 새로 생성된 객체를 가리킵니다.
5. 이벤트 핸들러에서의 this
이벤트 핸들러 내에서 this는 이벤트를 발생시킨 DOM 요소를 가리킵니다.
6. 화살표 함수에서의 this
화살표 함수는 자신만의 this 바인딩을 가지지 않습니다. 대신, 주변 스코프의 this 값을 사용합니다.
7. 명시적 바인딩: call, apply, bind
this를 명시적으로 바인딩할 수 있는 방법들도 있습니다.
- call 메서드: 함수 호출 시 this를 명시적으로 지정할 수 있습니다.
- apply 메서드: call과 유사하지만 인자를 배열로 받습니다.
- bind 메서드: 새로운 함수를 생성하고, this를 영구적으로 바인딩합니다.
'coding' 카테고리의 다른 글
| JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유, TypeScript의 동작 원리 (0) | 2024.08.03 |
|---|---|
| CSS-in-JS의 장점과 단점, Presentational & Container 디자인 패턴 (0) | 2024.07.13 |
| 리액트 생명주기(life cycle), CSR, SSR, SSG (0) | 2024.07.06 |
| Virtual DOM, key (0) | 2024.06.29 |
| CSS - Cascading (0) | 2024.05.25 |