Event

[hwinkr]

1. 이벤트 버블링, 캡쳐링이 무엇이고 어떤 차이가 있을까요?

• 매일메일 - 이벤트 전파에 대해서 설명해 주세요
• Frontend-interview-Questions 이벤트 버블링

2. 이벤트 위임이란 무엇인가요?

• 꼬리질문: 어떤 상황에서 이벤트 위임이 필요하다고 생각하실까요?
• 프론트엔드 개발자라면 알아야 할 지식들 - 이벤트 위임

3. 이벤트 핸들러를 등록하는 방식은 어떤 것들이 있을까요?
4. 마우스 이벤트 타입에는 어떤 타입들이 있나요? click 이벤트 말고 클릭을 대체할 수 있는 이벤트는 없을까요?

• https://github.com/junh0328/prepare_frontend_interview

[hwinkr]

1. 이벤트 버블링, 캡쳐링이 무엇이고 어떤 차이가 있을까요?

이벤트 버블링과 캡쳐링은 이벤트 전파 방식에 대한 개념입니다.

이벤트 버블링은 이벤트가 발생한 요소에서 시작하여, 부모 요소를 따라 점점 상위 요소로 전파되는 방식입니다. 자식 요소에서 클릭 이벤트가 발생하면 해당 클릭 이벤트는 자식 요소 → 부모 요소 → 조상 요소 순서로 상위 요소까지 전파됩니다. 이벤트를 전파받는 DOM 요소에서 e.stopPropogation() 메서드 호출을 통해서 더 이상의 버블링을 막을수도 있습니다.

이벤트 캡쳐링은 DOM의 최상위 요소에서 시작하여, 점점 하위 요소로 전파되는 방식입니다. 기본적으로는 이벤트 캡쳐링으로 인해서 전달 받는 이벤트는 핸들러를 등록해도 실행되지 않지만, addEventListner 메서드의 세 번째 인자에 {capture: true} 설정을 추가하면 실행할 수 있습니다.

이벤트 전파 순서는 버블링 → 타켓 → 캡쳐링입니다.

[hwinkr]

2. 이벤트 위임이란 무엇일까요?

이벤트 위임이란 HTML 마크업 구조에서 하위 요소들이 여러 개 있을 때 하위 요소들에 각각 이벤트 핸들러를 등록하는 것이 아니라, 하위 요소들의 부모 요소에 이벤트 핸들러를 등록하는 방식입니다. 자식 요소에서 발생한 이벤트가 버블링으로 인해서 부모 요소 또한 자식 요소에서 발생한 이벤트 객체를 전달받을 수 있다는 특징을 이용하는 방식입니다.

이벤트 위임을 활용하면 동적으로 생성되는 자식 요소에 대해서도 별도의 이벤트 핸들러를 등록해 주지 않아도 된다는 장점, 자식 요소가 많을 경우 너무 많은 이벤트 핸들러 할당으로 인해 메모리를 많이 사용되는 문제를 해결해 준다는 장점, 하나의 이벤트 핸들러만 등록하고 유지보수하면 된다는 장점이 있습니다.

실제로 사용해 본 경험이 있나요?

실제로 개발하고 있는 서비스에서, 사용자가 드래그로 시간을 표시할 수 있도록 하는 기능을 구현해야했습니다. <table /> 태그를 활용해서 개발했고, 각 <td /> 태그에 이벤트 핸들러를 등록하는 것이 아니라 부모 요소 <table /> 태그에 이벤트 핸들러를 등록해서 드래그 기능을 구현했습니다. 확실히 하나의 이벤트 핸들러만 있으니, 관리 & 유지보수가 쉬웠던 것 같아요.

2 - 1. 어떤 상황에서 이벤트 위임을 사용하는 것이 좋을까요?

2 질문에 대한 답변으로 충분히 커버 가능하다고 생각.

[hwinkr]

3. 이벤트 핸들러를 등록하는 방식에는 어떤 것들이 있나요?

자바스크립트에서 이벤트 핸들러를 등록하는 방식에는 3가지가 있습니다. 이벤트 핸들러 어트리뷰트, 이벤트 핸들러 프로퍼티 그리고 addEventListner 메서드를 활용하는 방식이 있습니다.

어트리뷰트 방식은, HTML 태그 속성으로 이벤트 핸들러를 직접 등록하는 방식입니다. 이벤트가 발생했을 때 수행할 함수 호출을 문자열로 전달하여 핸들러를 등록합니다.

프로퍼티 방식은 DOM 노드 객체에 on을 접두사로 가지는 이벤트 핸들러 프로퍼티에 함수 참조를 할당하는 방식입니다. 이 방식은 하나의 이벤트에 대해서 하나의 핸들러만 등록할 수 있다는 특징이 있습니다.

addEventListener 메서드는 해당 메서드를 사용해서 이벤트를 등록하는 방식입니다. 한 이벤트에 대해서 여러 핸들러를 등록할 수 있습니다. 그리고, removeEventListner 를 통해서 등록해둔 핸들러를 제거할 수 있다는 특징도 있고, 이벤트 버블링&캡쳐링을 더 세부적으로 제어할 수 있습니다.

[hwinkr]

4. 마우스 이벤트 타입에는 어떤 타입들이 있나요? click 이벤트 말고 클릭을 대체할 수 있는 이벤트는 없을까요?

클릭 이벤트는 마우스를 눌렀을 때, 떼어졌을 때 동일한 위치일 경우에만 발생하기 때문에 누르는 곳과 떼는 위치가 다르다면 핸들러가 동작하지 않을 수 있습니다. 이런 특성으로 인해서 클릭 이벤트는 다른 마우스 이벤트로 대체되기도 합니다. mousedown은 마우스를 누르는 순간 발생합니다. 클릭 이벤트를 더 빠르게 처리할 수 있습니다. mouseup 는 마우스를 떼는 순간 발생하므로, mousedown과 함께 마우스 클릭을 대체할 수 있습니다.

드래그 기능을 구현할 때는, 마우스를 눌렀다가 다른 곳에서 마우스를 떼는 상황에서는 click 이벤트가 발생하지 않기 때문에 mousedown, mouseup 이벤트를 활용해 본 경험이 있습니다.