[CodeIt] JavaScript 중급 토픽1(이벤트 살펴보기)

- elem.addEventListener(event, handler)를 통해 이벤트 핸들러를 등록하는 것이 가장 권장되는 방식입니다.

 

- elem.removeEventListner(event, handler)를 통해 이벤트 핸들러를 제거할 수 있습니다. handler를 추가할 때 바로 함수를 입력하면 이러한 방식으로 제거가 안되므로, 반드시 이벤트를 변수에 할당하여 handler를 전달해 추가해줘야 합니다.

 

- removeEventListner는 파라미터로 전달하는 타입과 이벤트 핸들러가 addEventListner메소드로 등록할 때와 동일할 때만 이벤트 핸들러를 삭제할 수 있습니다.

 

- click 이벤트뿐만 아니라 다양한 이벤트들이 존재하고, 이벤트에는 마우스 이벤트, 키보드 이벤트, 포커스 이벤트, 입력 이벤트, 스크롤 이벤트, 윈도우 창 이벤트 등이 존재합니다.

 

- 이벤트의 프로퍼티 중 type과 target이 주로 사용됩니다.  target은 이벤트가 발생한 해당 DOM 요소가 담겨있습니다.

 

- ★이벤트 핸들러의 첫번째 파라미터에는 자동으로 이벤트 객체가 전달됩니다. 그리고 그 이벤트 객체는 이벤트 타입에 따라서 갖고 있는 프로퍼티들이 조금씩 다릅니다. 공통 프로퍼티로는 type, target, currentTarget, timeStamp, bubbles가 있습니다.

 

- 이벤트 버블링에 의해 부모 요소의 이벤트 핸들러가 같이 동작됩니다. 이때, 부모 요소의 이벤트 핸들러에서도 target은 최초의 이벤트가 발생한 곳으로 고정됩니다. 하지만, currentTarget으로 하면, 이벤트 핸들러가 동작되는 곳의 요소로 반환됩니다.

 

- e.stopPropagation( )을 이용하면 버블링을 멈출 수 있습니다. 하지만, 애초에 이런 상황을 만들지 않도록 하는 것이 좋습니다.

 

- 이벤트엔 버블링 이외에도 캡처링(capturing)이라는 흐름이 존재합니다. 실제 코드에서 자주 쓰이진 않습니다. 캡쳐링은 이벤트가 발생하면 가장 먼저, 그리고 버블링의 반대 방향으로 진행되는 이벤트 전파 방식입니다. addEventListner에 세번째 프로퍼티에 true 또는 {capture:true}를 전달하면 캡쳐링 단계에서 이벤트 핸들러가 동작합니다.

 

- 버블링을 이용해서 자식 요소에서 발생하는 이벤트를 부모 요소에서 다루는 방식을 이벤트 위임(Event Delegation)이라 부릅니다. 하지만, 오로지 부모 요소를 클릭해도 동작한다는 점이 문제입니다. 따라서 따로 처리를 해줘야 합니다. 

 

-event.preventDefault()를 통해 브라우저의 기본적인 동작(ex. 마우스 오른쪽버튼)을 막을 수 있습니다. 꼭 필요한 경우에만 사용하도록 해야 합니다.