1. 2일 전

    Date, JSON 객체

    Date, JSON 객체의 이모저모

  2. 19일 전

    ES6 - Generator

    Generation 함수 사용하기

  3. 26일 전

    ES6 - iteration & for ... of

    iteration과 활용

  4. 1달 전

    ES6 - Symbol

    왜 Symbol이 필요할까?

  5. 1달 전

    ES6 - Rest/Spread 연산자

    코드를 더 간결하게

  6. 2달 전

    ES6 - Promise

    콜백 지옥을 벗어나자

  7. 2달 전

    Webpack(3) - Plugin

    Plugin으로 더 강력한 Webpack

  8. 2달 전

    ES6 화살표 함수

    화살표 함수에 대해 깊게 이해하기

  9. 2달 전

    32. 이벤트

    이벤트 루프

  10. 2달 전

    JS가 객체지향언어라 할 수 있는 이유

    대체가능성, 내적동질성

  11. 3달 전

    Webpack(2) - Loader

    Loader로 다양한 파일 다루기

  12. 3달 전

    비동기 처리

    JavaScript에서 비동기 처리

  13. 3달 전

    19. 클로져

    JavaScript에서 클로저란?

  14. 3달 전

    18. 실행컨텍스트

    JavaScript에서 실행컨텍스트

  15. 3달 전

    17. this

    JavaScript에서 this

  16. 3달 전

    Webpack(1) - 기본편

    Webpack 대한 기본 이해

  17. 4달 전

    Babel(4) - polyfill

    더 많은 브라우저 지원하기

  18. 5달 전

    Babel(3) - 설정편

    설정하는 다양한 방법

  19. 5달 전

    Babel(2) - 실행편

    실습을 통한 더 깊은 이해

  20. 5달 전

    Babel(1) - 기본편

    babel에 대한 기본 이해

Tamm자바스크립트 웹 개발 환경을 좋아하고 사람들에게 재미를 주는 것에 관심이 많은 개발자 입니다.

32. 이벤트

이벤트 루프

featured image thumbnail for post 32. 이벤트

Event | PoiemaWeb

event

자바스크립트는 DOM 객체에 다양한 이벤트를 포함시킬 수 있다. 이벤트가 발생하면 핸들러가 이벤트에 대한 처리를 맡게 된다. 이벤트 핸들러는 일반적인 함수와 동일하지만 등록된 이벤트가 발생했을 때 실행된다. 이벤트를 등록하고 이벤트가 발생하면 이벤트 핸들러가 동작 하는 것은 브라우저가 알아서 해준다.

<!DOCTYPE html>
<html>
<body>
  <button class="myButton">Click me!</button>
  <script>
    document.querySelector('.myButton').addEventListener('click', function () {
      alert('Clicked!');
    });
  </script>
</body>
</html>

2. 이벤트 루프(Event Loop)


이벤트 루프란 자바스크립트가 동시성을 제공하는 방식이다.

32%20991ff201494246d4b2ca5929044f6d1e/event-loop.png

https://poiemaweb.com/js-event

Heap: 자바스크립트에서 사용하는 객체 인스턴스가 할당되는 영역 → 원시값?

Call Stack: 자바스크립트 엔진이 코드를 실행하는 Stack 공간

Event Queue: 비동기 함수의 콜백 함수, 이벤트 핸들러, Timer 함수의 콜백 함수 등이 실행할 수 있는 조건이 되었을 때 보관되는 영역.

Event Loop: Call Stack이 비어있다면, Event Queue에서 하나씩 꺼내 Call Stack으로 옮겨서 자바스크립트 엔진이 실행할 수 있게 한다. 이벤트 루프는 이 과정을 무한이 반복한다.

자바스크립트가 단일 스레드이며 하나의 Call Stack을 사용한다. ajax get을 호출 한다고 했을 때를 생각해보자. ajax로 get 메서드를 호출하고 비동기적으로 응답을 받아 처리해야 한다. 이 때, 응답을 줄 때까지 기다리지 않고 call stack에 있는 일을 처리 한다. 그리곤 아까 get으로 호출한 것에 대한 응답이 올 때, 이벤트 루프는 Event Queue에서 Call Stack으로 옮겨서 응답을 처리하도록 한다.

function func1() {
  console.log("func1");
  func2();
}

function func2() {
  setTimeout(function() {
    console.log("func2");
  }, 0);

  func3();
}

function func3() {
  console.log("func3");
}

func1();

이벤트의 종류는 겁나 많다.. Event reference

3.1 UI Event


아래는 window 객체에 넣으면 이벤트를 발생시킬 수 있다.

load : 웹 페이지 로드가 완료되었을 때.

unload: 웹페이지를 새로 고침 할 때, 그 외의 호출 되는 경우가 있을까?

error: 어떤 스크립트 오류가 발생했을 때

resize: 리사이즈 이벤트

scroll: 사용자가 스크롤 할 때

select: 텍스트를 선택했을 때인데, 이 이벤트는 몇가지 태그에 대해서만 동작 한다.

, , , and