Event #33
Replies: 1 comment
-
A. 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때, 해당 요소에서 가장 최상위 요소까지 동일한 이벤트가 발생하는 현상을 의미하며, 이벤트 캡처링은 DOM 트리의 최상위 요소에서 시작해 이벤트가 발생한 target 요소까지 동일한 이벤트가 발생하는 현상을 의미합니다. 두 현상의 차이점은 이벤트가 발생했을 때 이벤트 전파 방향에서 차이점이 있습니다. 이벤트 버블링은 이벤트 발생 요소에서 최상위 요소까지 이벤트가 전파되는 반면, 이벤트 캡처링은 최상위 요소에서 이벤트 발생 요소까지 전파됩니다. 또한, 동일한 요소 내 동일한 이벤트에 대해 서로 다른 이벤트 핸들러가 등록된 경우 이벤트 버블링보다 이벤트 캡처링이 먼저 실행됩니다.
A. 이벤트가 발생하면 최상위 조상에서 아래로 전파되는 캡처링 단계, 이벤트가 타겟 요소에 도착해 실행되는 타겟 단계, 다시 위로 전파되는 버블링 단계로 진행되기 때문에 이벤트 캡처링이 이벤트 버블링보다 먼저 실행되게 됩니다.
A. 이벤트 핸들러를 상위 요소에서 등록해 하위 요소들의 이벤트들을 제어하는 방식을 의미합니다.
A. 저는 이전에 TO DO 앱과 유사한 음료 메뉴 관리 앱을 구현할 때 카테고리를 핸들링 하는 과정에서 유용함을 느꼈던 경험이 있었습니다. 원래라면 각 카테고리에 대해 이벤트 핸들러를 등록하고 로직을 추가해야했지만, 상위인 nav 태그에 이벤트를 등록하고, 클릭한 요소가 포함되었을 때 로직을 처리해줬기 때문에 코드도 간결해지고 메모리도 효율적으로 사용하여 유용한 경험이었습니다.
DOMContentLoaded가 load 이벤트 보다 더 빠르게 실행된다는 차이점이 있습니다. DOMContentLoaded의 경우 HTML이 완전히 로드되고 파싱되었을 때 발동되는 이벤트인 반면, load 이벤트의 경우 모든 리소스가 다운 되었을 때 실행되는 이벤트입니다.
A. 커스텀 이벤트는 개발자가 직접 정의하고 발생시키는 이벤트로, 기존 이벤트의 경우 특정 인터렉션이 발생했을 때 고정적으로 발생하는 반면, 커스텀 이벤트는 원하는 시점에서 개발자가 직접 네이밍한 이벤트를 dispatch가 가능하며, dispatch 과정에서 원하는 데이터를 넣어줄 수도 있습니다.
커스텀 이벤트를 사용한 경험에 대해 설명해주시고, 사용하면서 느꼈던 장/단점에 대해 설명해주세요. A. 우아한테크코스 내에서 미션을 할 때 커스텀 이벤트를 사용한 경험이 있습니다. 웹 컴포넌트를 통해 애플리케이션을 구성했었는데, 일반적으로 데이터를 전달할 때 단방향으로 전달하기 때문에, 같은 depth에 있지만 서로 다른 컴포넌트의 경우 데이터 전달에 어려움이 있었습니다. 하지만 이런 어려움을 컴포넌트에서 커스텀 이벤트를 등록해놓으면 특정 컴포넌트에서 커스텀 이벤트를 dispatch 했을 때, 그 이벤트를 통해 데이터를 전달받아 로직을 수행할 수 있었던 경험이 있습니다.
A. 이벤트 핸들러를 등록할 때, 태그 속성에 등록하는 방식인 인라인 이벤트 핸들러 & 특정 요소에 접근해 그 요소 프로퍼티에 등록하는 방식인 DOM 프로퍼티 방식, 마지막으로 addEventListener라는 API를 통해 등록하는 방식이 있습니다. 인라인 이벤트 핸들러의 경우 별도 js 파일 없이 이벤트 핸들링이 가능하다는 장점이 있지만, HTML과 JS 코드가 섞여 관심사의 분리가 이뤄지지 못한다는 단점이 있습니다. DOM 프로퍼티 방식의 경우 HTML과 JS를 분리할 수 있다는 장점이 있지만, 한 이벤트에 대해 하나의 핸들러만 할당 가능하다는 단점이 있습니다. 마지막으로 addEventListener의 경우 동일한 이벤트에 대해 여러 핸들러를 추가 가능하며 이벤트 위임을 구현할 수 있다는 장점이 있습니다.
A. event.target은 이벤트를 발생시킨 요소인 반면, currentTarget은 이벤트 핸들러에 등록된 요소라는 점에서 차이가 있습니다.
A. preventDefault()를 통해 이벤트 발생 시 브라우저의 기본 동작을 방지할 수 있습니다. 저의 경우 우아한테크코스 미션을 수행할 때 form을 만드는 과정에서 유용함을 느꼈습니다. form이 submit 될 경우 기본적으로 새로고침 되게 되는데 이 경우, 정상적으로 입력하지 않은 값이 submit될 위험이 있지만, 해당 메서드를 통해 기본 동작을 멈추고 유효성 검사를 실행함으로써, 의도된 값만 submit되도록 했던 경험이 있습니다. |
Beta Was this translation helpful? Give feedback.
-
Q1. 이벤트 버블링과 이벤트 캡처링에 대해 설명 후 차이점에 대해 설명해주세요.
Q1-1. 이벤트 캡처링이 이벤트 버블링보다 더 먼저 실행되는 이유가 있을까요?
Q2. 이벤트 위임에 대해 설명해주세요.
Q2-1. 이벤트 위임을 적용했던 경험에 대해 알려주시고, 느꼈던 장/단점에 대해 설명해주세요.
Q3. document load 이벤트와 DOMContentLoaded 이벤트의 차이점에 대해 설명해주세요.
Q4. 커스텀 이벤트에 대해 설명해주시고 기존 이벤트들에 대해 어떤 차이점이 있는지 설명해주세요.
Q4-1. 커스텀 이벤트를 사용한 경험에 대해 설명해주시고, 사용하면서 느꼈던 장/단점에 대해 설명해주세요.
Q5. 이벤트 핸들러를 등록하는 세 가지 방법과 각각의 장단점을 설명해주세요.
Q6. event.target과 event.currentTarget의 차이점을 설명해주세요.
Q7. 브라우저의 기본 동작을 방지하는 방법과 그 사용 사례에 대해 설명해주세요.
Beta Was this translation helpful? Give feedback.
All reactions