동기식 처리 모델 vs 비동기식 처리 모델

이벤트

이벤트 핸들러

이벤트가 발생하면 그에 맞는 반응을 해야한다. 이를 위해 이벤트에 함수를 연결하여 이벤트가 발생될 때 연결한 함수가 실행된다. 이때 연결한 함수를 이벤트 핸들러라 한다.

이벤트 핸들러 등록

1 인라인 이벤트 핸들러 방식

<!DOCTYPE html>
<html>
<body>
  <button onclick="myHandler1(); myHandler2();">Click me</button>
  <script>
    function myHandler1() {
      alert('myHandler1');
    }
    function myHandler2() {
      alert('myHandler2');
    }
  </script>
</body>
</html>

html에서 바로 javascript의 함수를 호출하는 것이다 그렇기때문에 html과 javascript가 섞이는 문제가 발생한다. 하지만 여러 개의 문을 전달할 수 있다.

2 이벤트 핸들러 프로퍼티 방식

<!DOCTYPE html>
<html>
<body>
  <button class="btn">Click me</button>
  <script>
    const btn = document.querySelector('.btn');

    // 이벤트 핸들러 프로퍼티 방식은 이벤트에 하나의 이벤트 핸들러만을 바인딩할 수 있다
    // 첫번째 바인딩된 이벤트 핸들러 => 실행되지 않는다.
    btn.onclick = function () {
      alert('① Button clicked 1');
    };

    // 두번째 바인딩된 이벤트 핸들러
    btn.onclick = function () {
      alert('① Button clicked 2');
    };

    // addEventListener 메소드 방식
    // 첫번째 바인딩된 이벤트 핸들러
    btn.addEventListener('click', function () {
      alert('② Button clicked 1');
    });

    // 두번째 바인딩된 이벤트 핸들러
    btn.addEventListener('click', function () {
      alert('② Button clicked 2');
    });
  </script>
</body>
</html>

// <html>
// <body>
//  <button class="btn1 btn2">Click me</button>

const btn1 = document.querySelector('.btn1');
const btn2 = document.querySelector('.btn2');
btn1.onclick = function () {
	alert('① Button clicked 1');
};
btn2.onclick = function () {
	alert('① Button clicked 2');
};
// 이렇게 다른 클래스에 지정해도 마지막에 지정한 것만 실행된다.

3 addEventListener 메소드 방식

<!DOCTYPE html>
<html>
<body>
  <label>User name <input type='text'></label>
  <em class="message"></em>

  <script>
    const input = document.querySelector('input[type=text]');
    const msg = document.querySelector('.message');

    input.addEventListener('blur', function () {
      if (input.value.length < 2) {
        msg.innerHTML = '이름은 2자 이상 입력해 주세요';
      } else {
        msg.innerHTML = '';
      }
    });
  </script>
</body>
</html>