모던 자바스크립트 스터디(이벤트 핸들링)

자바스크립트에는 다양한 이벤트가 있다!

마우스 이벤트:

click – 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때(터치스크린이 있는 장치에선 탭 했을 때) 발생합니다.
contextmenu – 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때 발생합니다.
mouseover와 mouseout – 마우스 커서를 요소 위로 움직였을 때, 커서가 요소 밖으로 움직였을 때 발생합니다.
mousedown과 mouseup – 요소 위에서 마우스 왼쪽 버튼을 누르고 있을 때, 마우스 버튼을 뗄 때 발생합니다.
mousemove – 마우스를 움직일 때 발생합니다.

폼 요소 이벤트:

submit – 사용자가

을 제출할 때 발생합니다.
focus – 사용자가 과 같은 요소에 포커스 할 때 발생합니다.
키보드 이벤트:

keydown과 keyup – 사용자가 키보드 버튼을 누르거나 뗄 때 발생합니다.

문서 이벤트:

DOMContentLoaded – HTML이 전부 로드 및 처리되어 DOM 생성이 완료되었을 때 발생합니다.

CSS 이벤트:

transitionend – CSS 애니메이션이 종료되었을 때 발생합니다.

등등이 있다! 이걸 다 외울 필요는 없을듯!

중요한건, 이벤트 핸들러 라는 개념이다. 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수인 핸들러(handler)를 의미한다.
대표적으로, DOM 프로퍼티 onevent 같은게 있다. onClick과 같은 메서드 사용은 우리에게 너무 익숙하기에 빠르게 넘어가자!

이벤트 객체

이벤트 객체란, 이벤트를 실행할때 이벤트 그 자체를 의미하게 되는 그 객체를 의미하는데, 이렇게 이벤트 객체 자체가 이벤트 핸들링을 할경우 생성되기에, 그 객체를 이용한 다양한 옵셔닝이 가능하다!

버블링

버블링(bubbling)은

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. -> 즉, 자식에게 할당된 이벤트가 부모로 까지 올라가게 된다! 우리 세션때도 다뤘던 내용

이러한 버블링을 방지하기 위해서는, 앞서 이벤트 객체의 메서드인 event.stopPropagation()를 사용해주면 이벤트 버블링이 아닌, 각각의 이벤트를 적용하는 구조를 만들 수 있게 된다!

반대로, 캡쳐링은 버블링과 반대로 이벤트가 하위 요소로 전파되는 단계이다. 캡쳐링은 버블링과 달리 자주 문제를 일으키는 친구는 아니다!
이렇게 배운 이벤트 객체는, 다른 부분에도 영향을 끼친다

브라우저 기본동작 막기?

a태그를 누르면 그 링크로 이동하는건 당연한 것! 이런 당연한 행동을 브라우저 기본 동작이라고 한다.

이러한 브라우저 기본 동작을 해지하기 위해서는 버블링과 같은 처리과정이 필요하다. 바로 이벤트 객체를 사용하는것!

event.preventDefault() 을 사용하는 방법과 ,onclick 함수의 리턴을 False로 해주는 등의 방식으로 브라우저의 기본동작을 막을 수 있다. 이는 우리가 늘 사용해왔던
addEventListener의 passive: true 옵션은 브라우저에게 preventDefault()를 호출하지 않겠다고 알리는 역할을 하기 때문이다!

이벤트 직접 만들기

이벤트를 직접 만들어주는 것도 가능하다

let event = new Event(type[, options]);

이런식으로 event라는 Event 객체를 직접 만들어주었다. 이러한 Event 객체는 바로 사용할 수 있는 것이 아닌 dispatch 과정을 거쳐야한다.

elem.dispatchEvent(event);

이런식으로 dispatch 해주는 과정이 필요하다!

하지만 실제로는 new CustomEvent를 이용해서 커스텀이벤트를 만들어주는 것이 좋다. 왜냐하면, 두번째 인자에 detail을 넣어줄 수 있는데, 커스텀 이벤트 관련 정보를 명시하고, 정보를 이벤트에 전달할 수 있기 때문이다!

elem.dispatchEvent(new CustomEvent("hello", {
  detail: { name: "보라" }
}));

이런식으로!

마우스 이벤트?

mousedown·mouseup
요소 위에서 마우스 왼쪽 버튼을 누를 때, 마우스 버튼 누르고 있다가 뗄 때 발생합니다.
mouseover·mouseout
마우스 커서가 요소 바깥에 있다가 요소 안으로 움직일 때, 커서가 요소 위에 있다가 요소 밖으로 움직일 때 발생합니다.
mousemove
마우스를 움직일 때 발생합니다.
click
마우스 왼쪽 버튼을 사용해 동일한 요소 위에서 mousedown 이벤트와 mouseup 이벤트를 연달아 발생시킬 때 실행됩니다.

등등의 이벤트가 있다!

여기서 마우스 버튼에는 어떤 버튼이 클릭되었는지 알려주는 button property가 있다. (주로 로그인할때 enter 치면 로그인 되는식으로!)
이러한 값들은 현실적으로 외우긴 힘들기에, 필요할때마다 사용해주면 좋다.

• 클라이언트 좌표: clientX와 clientY
• 페이지 좌표: pageX와 pageY 가 있는데, 클라이언트 좌표는 웹 문서를 기준으로 왼쪽과 위에서 얼마만큼 떨어져있는지,
  페이지 좌표는 현재 창 왼쪽위를 기준으로 얼마만큼 떨어져있는지를 알려주는 프로퍼티 값들이다.

  드래그앤 드롭?

  ball.mousedown → document.mousemove → ball.mouseup

  과정을 통해, 드래그앤 드롭을 구현할 수 있다. ball은 여기서 target을 의미한다. 이는 , 포인터를 움직이는데 요소는
  포인터의 초기 이동을 기억하고 드래그하는 동안 유지하는 원리로 작동하게 된다.