Event (이벤트)

interaction: 상호작용
웹서비스를 이용하는 유저와의 효과적인 상호작용을 위해서는
HTML, CSS 구조만으로는 한계적이고 JavaScript를 통해
동적인 상호작용이 가능하다.
JavaScript의 여러 요소 중에서도 Event가 그 역할을 할 수 있다.

addEventListener

이벤트를 실행할 때 사용하는 함수이다.
보이는 것처럼 직관적인 단어 그대로,
이벤트가 언제 발생하는지 듣고 있다는 뜻을 가지고 있다.

요소.addEventListener(이벤트 종류, function() {
// 이벤트 발생 시 실행 내용

위와 같이 표현이 가능하다.

callback function

위 예시에서, 인자로 전달된 함수를 '콜백 함수'라고 한다.

Click Event

click
이벤트 중 웹사이트에서 가장 많이 일어나는 이벤트이다.

const thisIsButton = document.getElementsByClassName('login-btn')[0];

thisIsButton.addEventListener('click', function() {
  const password = document.getElementById('password').value;
  const rePassword = document.getElementById('re-password').value;

  if (!password) {
    alert('비밀번호를 입력해주세요!');
    return;
  }

getElementsByClassName으로, 'login-btn'이라는 클래스를 찾도록 한다. 여기서 "getElements"와 같이 복수형인 이유는, 클래스는 같은 클래스명으로 여러 개 존재할 수 있고 이와 같은 이유로 [0]이라는 배열의 위치 지정도 선언하는 것이다.

Key Event

key down key up
유저가 키보드를 누르거나, 띄울 때 일어나는 이벤트이다.

const thisIsPw = document.getElementById('password');
const thisIsCode = document.getElementById('code');


thisIsPw.addEventListener('keydown', function(event) {
  thisIsCode.innerHTML = event.keyCode; 
});

getElementByID로 'password'라는 아이디를 찾도록 한다.
키가 눌리면, 이벤트가 발생하도록 위와 같이 설정할 수 있다.