[JavaScript] 이벤트

• 이벤트(Events)는 웹 상에서 발생하는 사건들을 말한다. → 사용자가 화면을 클릭하거나 드래그하거나 윈도우의 사이즈를 줄이거나 하는 행위 등을 말한다.
• 이벤트를 통해 사용자와 웹페이지는 상호작용(Interaction)이 가능하게 된다.

이벤트 핸들러 등록

• DOM 요소를 기준으로 이벤트를 감지하고 원하는 작업을 수행할 수 있다.

addEventListener()

• 이벤트를 감지하고 동작을 실행할 수 있다.
• 첫 번째 매개변수로 이벤트 타입, 두 번째 매개변수로 실행할 함수(Event Handler)를 받는다. →

첫 번째 매개변수로 받은 이벤트가 발생하면, 두 번째 매개변수로 받은 함수가 실행된다.

<div>
  <p>아래 버튼을 누르시면 경고창이 날아갑니다!</p>
  <button>!경고!</button>
</div>

const button = document.querySelector("button");

button.addEventListener("click", function onButtonClick () {
  alert("경고합니다!");
});

이벤트 종류

• 다양한 이벤트가 있며 필요에 따라 찾아서 적용할 수 있다.

Keyboard Event

• keydown : 키를 누르고 있을 때
• keyup : 누르고 있던 키를 뗄 때
• keypress : 키를 누르고 뗏을 때

Mouse Event

• click : 마우스 버튼을 클릭했을 때
• dbclick : 마우스 버튼을 더블 클릭했을 때
• mousedown : 마우스 버튼을 누르고 있을 때
• mouseup : 누르고 있던 마우스 버튼을 뗄 때
• mousemove : 마우스를 움직일 때
• mouseover : 마우스를 요소 위로 움직였을 때
• mouseout : 마우스를 요소 밖으로 움직였을 때

Focus Event

• input : input 또는 textarea 요소의 값이 변경되었을 때
• change : select box, checkbox, radio button의 상태가 변경되었을 때
• submit : form을 submit할 때

Clipboard Event

• cut : 콘텐츠를 잘라내기 할 때
• copy : 콘텐츠를 복사할 때
• paste : 콘텐츠를 붙여넣기 할 때

이벤트의 흐름

• 계층적 구조에서 이벤트가 발생하기 때문에 연쇄적인 반응이 일어난다.
• 자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 것을 버블링(Bubbling)이라 하고, 다시 부모 요소부터 시작하여 이벤트를 발생시킨 자식 요소까지 도달하는 것을 캡처링(Capturing)이라 한다.

• addEventListener 메소드의 세 번째 매개변수에 true를 설정하면 캡처링으로 전파되는 이벤트를 인식하고, false 또는 미설정하면 버블링으로 전파되는 이벤트를 인식한다.

이벤트 객체

• 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 유용한 정보를 제공한다.
• 이벤트 핸들러를 선언할 때 이벤트 객체를 전달받을 첫 번째 매개변수를 선언해야만, 이벤트가 발생했을 때 이벤트 핸들러에 인자로 전달된다.

button.addEventListener("click", function onButtonClick (ev) {
  alert("경고합니다!");
});

이벤트 프로퍼티

Event.target

• 실제로 이벤트를 발생시킨 요소를 가져오거나 수정할 수 있다.

Event.currentTarget

• 이벤트에 바인딩된 DOM 요소를 가져오거나 수정할 수 있다.

P.S.

사용자의 액션과 페이지의 변화를 알아서 인식하고 정보를 전달해 준다는 점에서 브라우저는 참 똑똑한 녀석이라는 생각이 들었다😆 이제 어느 정도 스스로 찾아보면서 동적인 페이지를 만들어 볼 수 있지 않을까🙃

참고 문서

• Events by 바닐라코딩 사전 학습 가이드
• 이벤트 by PoiemaWeb