TIL.24 EventListener

출저

• MDN
• 위코드 강의자료
• 공부합시다
• All-round programmer

Event(이벤트)

• 이벤트란 사용자가 마우스를 조작하거나 키보를 눌렀을때, 클릭을 했을 때와 같이 어떤 행동을 취했을때 그에 맞게 반응하는 것을 말한다.
• 자바스크립트의 발전으로 더욱 interactive 한 브라우저로 발전하고 있으며 이것을 동적이고 반응적인 웹이라 한다.

이벤트 종류

• 마우스 이벤트

  click : 마우스 버튼 클릭하고 버튼에서 손을 뗌
  dblclick : 마우스 버튼을 두 번 연속 더블 클릭 함
  mousedown : 마우스 클릭의 앞 절반 (버튼을 누름)
  mouseup : 마우스 클릭의 뒤 절반 (버튼을 뗌)
  mouseover : 마우스 포인터가 요소 위에 올라감
  mousemove : 마우스 포인터가 움직임

• 키보드 이벤트

  keydown : 키를 누르는 순간
  keyup : 키를 눌렀다 떼는 순간
  keypress : 키를 눌러 문자가 연결되었을 때

• 폼 이벤트

  submit : 전송 버튼을 누름 또는 텍스트 필등에서 엔터키를 누름
  reset : 폼을 초기화하기 위함
  change : 폼 필드에서 변경이 일어남 (텍스트 변동,라디오 버튼의 클릭 등)
  focus : 웹브라우저가 특정 요소에 집중함 (해당 요소를 클릭,마우스 커서 놓을때 등)
  blur : focus의 반대 (탭 누름,필드 밖을 클릭하는 등)

• 문서(document)/창(window) 이벤트

  load : 문서 및 추가 자원(이미지 등)들을 모두 불러왔을 때 발생
  readystatechange
  resize : 창의 최대화 버튼 또는 창의 크기를 조절
  scroll : 스크롤바를 드래그하거나 또는 키보드(위/아래/home/end 등) 또는 마우스휠 사용
  unload : 해당 페이지를 벗어남 (링크를 클릭, 브라우저 탭/창을 닫음 등)

addEventListener

• 위와 같은 이벤트를 적용시킬때 크게 세가지 정도의 방법이 있는데,

1. HTML에 inline으로 등록.
2. element의 onload 속성을 통한 등록.
3. addEventListener/attachEvent를 이용한 등록.

• HTML 과 js를 분리시켜 이벤트를 주면서 다양한 라이브러리를 쓸때 충돌을 줄일 수 있다는점. 한번에 여러 이벤트를 줄 수 있다는 점등의 이점으로 3번의 방법을 추천한다.

예제

• 비밀번호와 비밀번호 확인 란의 값을 비교하여 같지 않으면 alert라는 클래스를 가진 태그에 '비밀번호가 일치하지 않습니다'를 보여주는 이벤트.

const thisIsPw = document.getElementById('re-password');
const thisIsCode = document.getElementById('code');
//DOM 을 이용하여 js에서 html 요소들을 불러준다.

thisIsPw.addEventListener('keyup', function(event) { //키업을 했을때, 함수를 실행시킨다.
  const passwordValue = document.querySelector('#password').value;
  const rePasswordValue = document.querySelector('#re-password').value;
  const pTagAlert = document.querySelector('.alert');

  if (passwordValue !== rePasswordValue) {
    pTagAlert.innerHTML = '비밀번호가 일치하지 않습니다'
  } 
  if (passwordValue === rePasswordValue) {
    pTagAlert.innerHTML = ''  
  }
});