Event types & object

Event Object

1. addEventListener를 이용해서 어떤 요소에 이벤트를 등록하면, 이벤트가 발생할 때 마다 자동으로 event object라는 것이 생성된다.
2. event object는 우리가 이벤트 발생 시 호출하는 함수의 첫번째 parameter로 전달할 수 있다(하지 않을 수도 있다).
3. event의  property나 method를 이용할 수 있다.

 

const input = document.querySelector("input[type='text']");
input.addEventListener("keydown", () => console.log('key down!') );
input.addEventListener("keydown", event => console.log(event) ); // using event obj

 

mouse event

가장 흔한 이벤트는 마우스 이벤트에 속하는 "click" 이벤트이다. 이벤트를 등록한 element를 클릭하면 click event object가 자동으로 생성된다. 이 객체에는 마우스의 클릭 이벤트가 발생한 지점, 즉 좌표와 관련된 property 데이터가 포함되어 있다. 다양한 기준에 따라, Client X,Y | Page X,Y | Offset X,Y와 같은 다양한 좌표를 제공한다. 

 

1. Client X,Y  | The coordinates of the mouse pointer in local coordinates(DOM content, 현재 윈도우에서 보여지고 있는 웹 페이지를 기준으로 한다).
2. Page X,Y | The coordinates of the mouse pointer relative to the whole document(현재 보여지고 있지 않은 부분까지도 포함하는, 즉 웹 페이지 문서 전체를 말한다).
3. Offset X, Y | 마우스 이벤트가 등록되어있는 대상의 left & top 모서리를 기준으로 x, y좌표를 나타낸다. 
   
   

keyboard event 

1. event.key | keyboard와 관련된 이벤트(ex. keydown, keyup)가 발생했을 때, 우리가 down/up한 키가 무엇인지 반환한다. 
   • 사용자가 설정한 언어에 따라 같은 위치의 키를 눌렀어도 다른 값을 가질 수 있다. 
2. event.code | 등록한 이벤트가 발생했을 때 우리가 down/up... 한 키의 키보드 상의 위치를 반환한다. 
   • 사용자가 설정한 언어에 관계없이 같은 위치의 키를 눌렀다면, 같은 값을 반환한다. 

input event

input.addEventListener('change', function (event) {
  console.log('change');
};

input.addEventListener('input', function (event) {
  console.log('input');
}

 

1. change | 사용자에 의해 input 값이 변경될 때 마다 발생하는 것이 아니라, 사용자가 input에 값을 입력하다가, 해당 input에서 벗어날 때(ex. 다른 요소에 포커스를 줄 때) 발생한다. 
2. input | 사용자에 의해 input 값이 변경될 때 마다 발생한다. 
   • clipboard나 음성 인식에 의해 값이 변경될 때에도 이벤트가 발생한다. 따라서 keydown과 같은 이벤트가 할 수 없는 일을 처리할 수 있다. 
   • input이 변경될 때 마다 DOM 요소를 업데이트 할 때 사용할 수 있다(ex. 현재 타이핑하고 있는 글자가 다른 영역에서 실시간으로 반영되게 만들기). 
   • Shift 키나, 방향키와 같이 input 값에 영향을 주지 않는 키를 눌렀을 때에는 이벤트가 발생하지 않는다. 

 

input event

 

form event | submit 

<form action="#" method="GET">
      <input type="text" name="user" placeholder="ID" />
      <input type="text" name="comment" placeholder="Leave a Commnet!" />
      <button type="submit">Submit</button>
</form>

 

<form> 태그는 기본적으로 사용자가 submit 버튼을 클릭하면, input에 입력한 값을 action 속성 값에 지정되어있는 URL로 전송하고, action 값에 지정되어 있는 URL로 이동하는 역할을 한다. 하지만 댓글을 남기는 경우와 같이, 사용자가 어떤 input을 제공한 뒤에 페이지를 이동하지 않는 경우도 있다. 

 

1. event.preventDefault() |  이벤트가 발생했을 때 기본적으로 일어나는 일을 막는다.
   • submit 이벤트의 경우, 페이지를 새로고침하고, action URL로 이동하는 것을 막는다. 
   • method를 사용할 경우에는 콜백 함수의 가장 첫번째 line에 작성해야 한다. 
   • active event에서만 사용 가능하다.  
2. form.elements | form 요소는 elements라는 property를 가지고 있는데, form의 모든 자식 요소를 HTMLFormControls Collection으로 반환한다. 
   • HTMLFormControlsCollection은 array-like iterable이다. 
   • index를 이용해서 자식 요소에 접근할 수 있다. 
   • 자식 요소에 name 속성을 지정해서 elements.nameValue로 해당하는 자식 요소에 접근하는 것이 더 좋은 방법이다. 

 

form.addEventListener('submit', function (event) {
  event.preventDefault();

  let userName = form.elements.user.value; // form.elements => form's child elements 
  let userComment = form.elements.comment.value;
  
  addCommnet(userName, userComment);
  
  form.elements.user.value = " "; // userName = " "; ❌
  form.elements.comment.value = " ";
});

 

load event | load vs. DOMContentLoaded

1. load | 브라우저가 html에 작성된 코드와 필요한 resouce(이미지, 폰트...)를 모두 준비하면 발생하는 이벤트이다.
2. DOMContentLoaded |  DOM요소, 즉 웹 페이지의 document(html)만 준비되었을 때 발생하는 이벤트이다.
   • DOMContentLoaded에서 등록한 일을 먼저 수행하고 => load에서 등록한 일을 나중에 수행한다.
3. "unload"와 "beforeunload"라는 이벤트도 있는데, 후자는 사용자가 웹 페이지에서 나가기 직전에 발생하는 이벤트를 말한다. 

passive vs. active Event 

브라우저에서 발생하는 이벤트는 마우스와 관련된 이벤트(click, wheel...) 뿐만 아니라 키보드와 관련된 이벤트(keyup, keydown...)부터, 에러 이벤트까지 매우 다양하다. 이런 이벤트를 passive와 active로 나눌 수 있는데, 마우스 wheel 이벤트는 passive, 마우스 click 이벤트는 active 이벤트로 분류한다. 그 기준은 무엇일까? 

 

passive 이벤트는 이벤트가 브라우저에서 원래 해야하는 일을 먼저 수행한 뒤에, 우리가 등록한 함수를 실행시킨다. 반면 active 이벤트는 우리가 등록한 이벤트를 먼저 수행한 뒤에, 본인이 원래 해야 하는 일을 수행한다.

 

예를 들어 버튼을 클릭했을 때와 마우스 휠을 아래로 내릴 때, 웹 페이지의 background 컬러를 임의의 값으로 변경하는 경우를 각각 생각해 보자. 휠 이벤트는 passive 이벤트이므로 마우스 휠이 하는 일, 즉 스크롤 바를 위, 아래로 움직이는 일을 수행한 뒤에, 우리가 등록한 랜덤 컬러 함수가 실행된다. 반면 클릭은 active 이벤트이므로, 우리가 등록한 랜덤 컬러 함수를 실행 시킨 후에, 클릭이 일어난다.