Modern JavaScript Event

 

---

 

1. Event Loop

• DOM Object Elements 와 관련, 웹페이지 이벤트 발생시 작업 로드 
• Event Handler : 이벤트에 맞는 반응 처리
• JavaScript engine은 요청된 작업을 순차적으로 실행하며 동시성을 지원, 브라우저나 Node.js은 비동기 요청 처리 환경 구성
• Event Loop  : Queue, Stack, Heap, Web API

 

 

 

 

• Call Stack	: 작업 요청시 순차적으로 Stack 쌓임 (단 하나의 Stack사용으로 task 종료 전까지 다른 task 수행 불가)
• Heap	: 동적으로 생성된 객체 인스턴스가 할당된 영역
• Event Queue	: 이벤트 루프에 의해 Call Stack이 비어지는 시점에 순차적으로 Call Stack영역으로 이동되어 처리(비동기 처리 콜백함수, 비동기식 이벤트핸들러, Timer함수의 콜백 함수가 보관되는 영역)
• Event Loop	: Call Stack 혹은 Event Queue에 실행중인 task가 있는지 반복하여 확인하여 Event Queue -> Call Stack 로 task를 이동시키고 실행

 

---

2. Event 종류

 

UI Event
load	웹페이지의 로드가 완료되었을 때
unload	웹페이지가 언로드될 때(주로 새로운 페이지를 요청한 경우)
error	브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 존재하지 않는 경우
resize	브라우저 창의 크기를 조절했을 때
scroll	사용자가 페이지를 위아래로 스크롤할 때
select	텍스트를 선택했을 때

 

Keyboard Event
keydown	키를 누르고 있을 때
keyup	누르고 있던 키를 뗄 때
keypress	키를 누르고 뗏을 때

 

Mouse Event
click	마우스 버튼을 클릭했을 때
dbclick	마우스 버튼을 더블 클릭했을 때
mousedown	마우스 버튼을 누르고 있을 때
mouseup	누르고 있던 마우스 버튼을 뗄 때
mousemove	마우스를 움직일 때 (터치스크린에서 동작하지 않는다)
mouseover	마우스를 요소 위로 움직였을 때 (터치스크린에서 동작하지 않는다)
mouseout	마우스를 요소 밖으로 움직였을 때 (터치스크린에서 동작하지 않는다)

 

Focus Event
focus/focusin	요소가 포커스를 얻었을 때
blur/foucusout	요소가 포커스를 잃었을 때

 

Form Event
input	input 또는 textarea 요소의 값이 변경되었을 때
	contenteditable 어트리뷰트를 가진 요소의 값이 변경되었을 때
change	select box, checkbox, radio button의 상태가 변경되었을 때
submit	form을 submit할 때 (버튼 또는 키)
reset	reset 버튼을 클릭할 때 (최근에는 사용 안함)

 

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

---

 

3. Event 처리방식

• Inline Handler 방식 : 핸들러 어트리 뷰트에 이벤트 핸들러 등록  (ex. <button onclick="handler()"> </button>)
• CBD (Component Based Development) : Angular/ React / Vue 와 같은  Framework, Library에서는 Inline Handler 방식으로 이벤트 처리
• Event Handler Property 방식 :   이벤트에 하나의 이벤트 핸들러만을 바인딩할 수 있음

  <button class="btn">Click me</button>
  <script>
    const btn = document.querySelector('.btn');
    btn.onclick = function () {
      alert('Button clicked ');
    };
  </script>

 

• addEventListener Method 방식 : 대상요소.addEventListender('대상요소 바인딩 이벤트', functionName, [,useCapture]),  DOM(HTMl,XML,SVG)에 대해 동작하며 브라우저는 웹문서를 로드한 후 파싱하여 DOM을 생성

    const input = document.querySelector('input[type=text]');

    input.addEventListener('blur', function () {
      alert('blur event occurred!');
    });

 

---

4. Event 흐름

 

 

 

• Event 전파방향에 따른 구분 : Capture Phase /  Bubbling Phase 순차적발생 (Capturing -> Bubbling -> 종료)
• addEventListener에서 세번째 요소 true 설정시 캡처링으로 전파되는 이벤트 캐치

---

5. Event Object

Event Property
Event.target	e.target.style.visibility	실제로 발생시킨 요소
Event.currentTarget	e.currentTarget	이벤트에 바인딩된 DOM 요소 (ex. <div style ="">)
Event.type	e.type	발생한 이벤트의 종류 (ex. keynup, keydown)
Event.cancelable	e.cancelable	요소 동작 취소 여부 (True, False)
Event.eventPhase	이벤트상 단계 (0:없음, 1:캡쳐링, 2:타겟, 3.버블링)

 

Event 기본동작 변경
Event.preventDefault()	폼 submit과 같은 페이지 이동 동작시, 요소가 가진 기본동작을 중단시킨
Event.stopPropgation()	이벤트 처리 이후 부모요소로 이벤트가 전파되는 것을 방지