이벤트 위임에 대해 설명해주세요.

[365kim]

이벤트 위임에 대해 설명해주세요.

[365kim]

공유하고싶은 자료 & 개인적으로 정리한 블로그 등이 있다면 여기👇👇👇에 댓글로 공유해주세요 😆

[365kim]

프론트엔드 인터뷰 핸드북 - 면접질문 해설

[igy95]

• 핵심키워드: 캡처링, 타겟팅, 버블링
• 경험요약: 없음 (리스트 요소 이벤트 정도..?)
• 스터디회고: 최대한 알고 있는 지식을 전달하는 느낌을 주고 싶었는데, 아무래도 외워온 티가 조금 났다. 기술적인 용어를 던질 때 적절히 회수하는 것도 중요할 듯

[jho2301]

핵심키워드: 이벤트버블링, 성능비용
경험요약: 투두리스트를 만들 때 각 투두아이템에 이벤트리스너를 등록하지않고 컨테이너요소 하나에 등록해줌 (투두요소를 새로 생성할 때 이벤트핸들러를 새로 등록하는 로직이 필요없다.)
스터디회고: 경험을 섞어서 이야기하면 더 풍부한 대답이 되었을 것 같다.

[seojihwan]

핵심키워드: 이벤트버블링, 이벤트캡쳐링
경험요약: 투두리스트, 이벤트리스너 등록및 해제
스터디회고: 질문을 까먹고 답변이 길어진다.

[365kim]

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

[zigsong]

• 핵심키워드: 컨테이너, 이벤트 핸들러
• 경험요약: X
• 스터디회고: 면접관 질문의 핵심이었던 '동작 메커니즘'에 대한 설명이 부족했다.

[0307kwon]

• 핵심키워드: 캡처링, 버블링
• 경험요약: 여러개의 element에 이벤트를 주어야할 때, 모달 dimmed 영역을 위해 이벤트 위임을 써본 경험
• 스터디회고: 캡처링에 대한 지식이 부족. 캡처링만 가능한 이벤트들이 있고, 그런 이벤트들을 실제로 경험해봐야할듯

[365kim]

• 핵심키워드 : 이벤트버블링, 메모리 이점, 자유로운 추가삭제
• 경험요약 : 바닐라 자바스크립트로 지하철 노선도 애플리케이션을 만들 때, 각 노선정보에 편집, 삭제 버튼을 달아주는 대신에 전체에 달아줌
• 스터디회고 : onclick을 attribute로 넣어준다는 것을 질문을 통해 인지했다고 했을 때, 뒤에 답변한 내용을 들어보면 충분히 알고있을만한 내용같은데 이걸 모르네 싶은 인상을 주었다. 면접관과 싱크를 잘 맞추는 과정이 필요할 것 같다. (attribute로 onclick을 단다는게 jsx문법 상인지, react 코드가 js로 트랜스파일링 된 후인지)

[yungo1846]

핵심키워드: 상위 요소, 버블링
경험요약: 반복되는 상품 정보 버튼에 대한 이벤트를 컨테이너에 위임
스터디회고: 상황이 머리 속으로 쉽게 그려지는 예시를 준비해야겠다.

[ddongule]

핵심키워드 :
경험요약
스터디회고 :

[zereight]

핵심키워드: 이벤트 위임, 캡처링, 버블링
경험요약: 바닐라 자바스크립트에서, 동적으로 생성/제거되는 버튼의 상단에 이벤트를 위임해주는 예시를 들었다.
스터디회고: 상대방이 좀더 시각적으로 표현하는 연습을 해야겠다.

[yujo11]

핵심키워드 : 이벤트 버블링, 이벤트 캡쳐링, 이벤트 위임
경험요약: JS에서 TodoList를 예시로 들어 사용자와의 상호작용으로 생기는 요소들을 감싸는 부모 요소에 이벤트를 등록해 위임해주는 예시를 들었다.
스터디회고 : React에서 이벤트 위임을 제대로 설명하지 못 했는데 인치의 도움으로 React에서 이벤트 위임이 어떻게 이루어지는지 다시 한번 상기할 수 있어서 좋았다.

[hchayan]

핵심키워드 : 이벤트 버블링, 이벤트 캡쳐링, 이벤트 위임
경험요약: Vanilla JS를 이용한 프로젝트에서 하위 반복되는 요소들에 공통된 이벤트를 달아줘야될때 사용했다.
스터디회고 : 위임과 버블링은 잘 설명한것 같지만, 이벤트 캡쳐링에 대한 전반적인 개념을 잘 설명하지 못했다.

[swon3210]

핵심키워드 : 이벤트 버블링, 상위 요소, 메모리 효율성
경험요약: 너무 많은 이벤트 바인딩이 일어나는 것을 막기 위해서 상위 요소에 이벤트를 걸고, 이벤트 객체를 분석해서 대상을 특정하는 방식으로 이벤트 핸들링을 구현했다.
스터디회고 : 경험은 잘 설명했지만 핵심적인 기반 이론에 대한 설명이 없었다.