Event

자바스크립트와 HTML의 상호작용은 이벤트 핸들에 의해서 이루어 지고 있다. 이 이벤트를 일으키는 주체는 사용자가 된다. 브라우저 화면을 클릭하거나 페이지가 로딩될 때, 브라우저 화면이 닫힐 때, 브라우저 화면이 줄거나 늘어날 때도 이벤트가 발생한다. 이러한 interactive한 반응을 구현하기 위해서는 자바스크립트 코딩이 필요하다.

이렇게 특정 요소에 interactive한 반응을 할 수 있게 하는 것을 이벤트(Event)라고 한다.

• 클릭 이벤트
• 마우스 이벤트
• 스크롤 이벤트
• 터치 이벤트
• resize(화면 크기 변화) 이벤트 등등 다양하다.

Javascript에서 이벤트를 감지하고 그에 맞는 결과를 내어 줄 수 있도록 코딩을 작성해야 한다.

🌟addEventListener🌟

이벤트를 달 때 사용하는 함수의 이름은 addEventListener이다.
이 함수는 특정 이벤트가 언제 발생하는지 가만히 듣고 있다가, 발생하면 인자로 받는 함수를 실행 시켜준다.

이벤트 함수 구조

요소.addEventListener(이벤트종류, function() {
  //이벤트가 일어났을 때 실행할 내용
});

그동안 인자로 배열, String, Number, Date 객체는 전달하는 것을 봤는데, 함수도 인자로 전달 할 수 있다.
이렇게 인자로 전달된 함수를 콜백 함수라고 한다.

Click 이벤트

버튼, 사진, 글 등 웹사이트에서 이루어지는 이벤트 중 가장 많은 것이 클릭 이벤트이다.
프론트 엔드 개발자는 버튼, 사진, 글 등의 요소마다 클릭 이벤트를 달아서 각자 클릭 이벤트에 맞는 reaction을 코딩해야 한다.

• 로그인 버튼 클릭 -> 로그인 api 호출
• 상품 사진 클릭 -> 상품 상세화면으로 이동
• 자세히 보기 버튼 클릭 -> 팝업 화면 출력

간단한 예제로 보자.
Event 함수를 사용하고 싶으면, DOM (Document Object Model)을 사용해야한다.

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;
  }
  
  if (!rePassword) {
    alert('비밀번호 확인을 입력해주세요!');
    return;
  }
  
  if (password !== rePassword) {
    alert('비밀번호가 맞지 않습니다!');
    return;
  }
  
  alert('로그인 성공!!');
});

우선,

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

getElementByClassName 함수로 login-btn이라는 클래스 이름이 있는 첫번째 [0] 요소를 찾는다.
thisIsButton이라는 변수에 .login-btn 요소를 찾아서 저장하는 것이다.
그 요소에 addEventListener를 달아준다.
첫 번째 인자에 click이라고 세팅한다.

thisIsButton.addEventListener('click', function() {
  //click 했을 때 실행되어야할 기능
});

이렇게 하면 앞으로 button.login-btn을 클릭(click 이벤트가 발생)하면, 두 번째 인자로 넘긴 함수가 실행 된다.

Key 이벤트

사람이 키보드를 누르면 발생하는 이벤트이다.

• 키보드를 눌렀을 때 발생하는 keydown
• 키보드를 누르고 떼는 순간 발생하는 keyup
• 키보드를 눌러 어떤 텍스트가 작성되는 순간 발생하는 Keypress

이번에는 keydown 이벤트로 addElementListener 추가해보자.

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

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

우선

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

이 부분을 보면 id는 중복이 될 수 없으니 전체 페이지 요소가 한 개 밖에 없어서 배열로 return되지 않고 요소가 return된 것이다. (위에 getElementByClassName 과 비교해보면 class는 중복이 될 수 있기 때문에 몇번째인지 [0]를 통해 지칭해줘야 한다.)

input#password 요소에 keydown이라는 이벤트가 발생하면 걸릴 수 있도록 eventListener를 추가 하였다.

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

inputdp 키보드로 무엇인가를 누르면 두 번째 인자인 function이 실행된다.
그래서 키보드를 누르면 span#code의 내용에 해당하는 key code가 들어간다.

key code 란 각 키보드가 갖고 있는 고유한 code이다.
평소에 다른 웹 사이트에서 로그인 할 때, 어디는 enter를 치면 로그인이 되고, 어디는 enter를 쳐도 로그인이 되지 않아 불편하다고 생각했을 것이다. frontEnd 개발자가 key이벤트를 추가해서 enter를 감지하여 로그인이 되도록 프로그래밍을 했느냐 아니냐의 차이이다.

enter키의 key code는 13이다.
다음과 같이 코드를 짤 수 있다.

thisIsPw.addEventListener('keydown', function(e) {
  if (e.keyCode === 13) {
     //로그인 함수로 이동
  }
});

클릭 했을 때 함수에 e라는 인자를 추가했다.
원래 함수에 항상 event와 관련된 정보를 인자로 받을 수 있다.

console.log(e);

로 확인해 보면 된다.

자바스크립트 이벤트 종류

마우스 이벤트

• click : 마우스 버튼 클릭하고 버튼에서 손을 뗌
• dbclick : 마우스 버튼을 두 번 연속 더블클릭함
• mousedown : 마우스 클릭의 앞 절반(버튼을 누름)
• mouseup : 마우스 클릭의 뒤 절반 ( 버튼을 땜)
  .드래그 앤 드롭 이벤트 : 위 두 이벤트(mousedoen, mouseup)로써 구현
• mouseover : 마우스 포인터가 요소 위에 올라감
• mouseout : 마우스 포인터가 요소 밖으로 벗어남
• mousemove : 마우스 포인터가 움직임
  .마우스 커서가 해당 요소내를 움직일 때 또는 커서의 위치 확인에 유용함
• 마우스 휠 이벤트 등이있음

키보드 이벤트

• keydown : 키를 누르는 순간
• keyup : 키를 눌렀다 떼는 순간
• keypress : 키를 눌러 문자가 연결되었을 때
  .즉, 화면에 글자가 완성되는 경우만 해당
  .한편, 누르고 있는 동안 화면에 해당 키가 연이어 나타나듯이 해당 이벤트도 계속 발생됨

폼 이벤트

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

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

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

기타 이벤트

• 텍스트 입력 이벤트, 시간 경과, 에러발생 등

이벤트 종류2

• onabort 이미지 로딩에서 이탈하였을 때(다른 연결로 이동)
• onactivate 개체의 activeElement 속성을 설정하였을 때
• onafterprint 관련된 문서를 인쇄하거나 인쇄 미리보기를 후 즉시
• onafterupdate 데이터 원본이 있는 개체가 성공적으로 업데이트되면
• onbeforeactivate 개체의 activeElement 속성이 설정되기 바로 전에
• onbeforecopy 선택된 내용이 시스템 클립보드(clipboard)로 복사하기 바로 전에
• onbeforecut 선택된 내용이 시스템 클립보드(clipboard)로 잘라내기 바로 전에
• onbeforedeactivate activeElement가 다른 개체로 이동하기 바로 전에
• onbeforeeditfocus 편집할 수 있는 용기 개체의 제어가 선택되기 바로 전에
• onbeforepaste 시스템 클립보드로부터 데이터를 붙여넣기하기 바로 전에
• onbeforeprint 관련된 문서를 인쇄하거나 인쇄 미리보기하기 바로 전에
• onbeforeunload 페이지가 언로드되기 바로 전에
• onbeforeupdate 연관된 데이터가 업데이트되기 바로 전에
• onbegin 이벤트에서 시간이 시작되면 엘레멘트에 발생된다.
• onblur 마우스나 탭에 의한 항해로 개체가 초점(포커스)을 상실 했을 때
• onbounce 내용이 개체의 한쪽 한계선에 도달하였을 때
• oncellchange 데이터 제공자에서 데이터의 내용이 변경되었을 때
• onchange 입력폼의 필드 내용이 변경되고 초점을 상실했을 때 발생
• onchange colorpick 비헤이버에서 색상이 변경되면 발생된다.
• onclick 왼쪽 마우스가 개체 위를 클릭하였을 때
• oncontentready 비헤이버 첨부된 엘레멘트의 내용이 파싱(parse) 완료되면 발생
• oncontentsave 비헤이버 첨부된 엘레멘트의 내용이 저장이나 복사되기 전에 발생
• oncontextmenu 사용자 지역에서 오른쪽 마우스를 클릭하였을 때
• oncontrolselect 사용자가 개체의 제어(control) 선택들 하려고 할 때
• oncopy 선택된 내용이 시스템 클립보드(clipboard)로 복사하기 하였을 때
• oncut 선택된 내용이 시스템 클립보드(clipboard)로 잘라내기 하였을 때
• ondataavailable 데이터 원천 개체로 부터 데이터가 도착하면 주기적으로 발생
• ondatasetchanged 데이터 원천 개체의 변경에 의한 감지가 있을 때
• ondatasetcomplete 데이터 원천 개체로부터 모든 데이터를 받아 사용할 수 있을 때
• ondatasetcomplete dataselect 비헤이버가 select의 내용을 차지하였을 때 발행
• ondblclick 마우스가 개체 위를 두번 클릭하였을 때
• ondeactivate activeElement가 현재의 개체에서 다른 개체로 이동하였을 때
• ondetach 엘레멘트에서 첨부된 비헤이버가 제거되기 바로전에 발생
• ondocumentready 비헤이버를 포함하는 문서가 파싱(parse)을 완료되었을 때 발생
• ondrag 마우스를 눌러 끄는 동안 계속해서 원본 개체에 발생
• ondragdrop NS 화일등의 개체를 창에 드롭다운 시켰을 때
• ondragend 마우스를 눌러 끄는 동안 계속해서 원본 개체에 발생
• ondragenter 사용자가 드래그하는 개체를 유효한 목표 드롭에서 놓았을 때
• ondragleave 드래그하는 마우스를 유효한 목표에서 놓지 않고 이탈했을 때
• ondragover 유효한 목표 위에서 드래그하는 동안 연속적으로 발생
• ondragstart 개체를 왼쪽 마우스를 누른 상태에서 드래그를 시작하면
• ondrop 드래그드롭 작업 중 마우스단추를 놓았을 때
• onend 엘레멘트에서 시간이 중지되면 발생
• onerror 런다임 오류가 발생하였을 때
• onerror 무효한 속성값을 할당하거나 읽기전용에 할당하면 발생
• onerror 무효한 속성값을 할당하거나 읽기전용에 할당하면 발생
• onerror 속성에 무효한 값을 할당하거나 읽기전용에 할당할 때 발생
• onerrorupdate 관련된 데이터가 업데이트되는 동안에 오류가 발생되면 발생
• onfilterchange 스타일 필터가 변경되거나 변환을 완료하면 발생
• onfinish 마퀴(MARQUEE)의 루프가 완료되면 발생
• onfocus 마우스나 탭에 의한 항해로개체에 초점(포커스)이 주어 졌을 때
• onfocusin 엘레멘트가 초점을 받았을 때
• onfocusout 엘레멘트가 초점을 잃었을 때
• onhelp 활성 윈도우에서 도움말을 위하여 F1 키를 누르면 발생
• onhide 메디어 플레이어가 감춰지면 발생된다.
• onkeydown 키를 개체 위에서 눌렀을 때 발생
• onkeypress 키(key)를 개체 위에서 눌렀다 놓았을 때 발생
• onkeyup 키를 개체 위에서 놓았을 때 발생
• onlayoutcomplete 채워넣기가 끝나고 인쇄하거나 인쇄미리보기를 실행하면 발생
• onload 개체를 로딩이 다 되었을 때
• onload 문서를 다시 로딩할 때 원래의 엘레멘트에서 발생
• onlosecapture 마우스에 의한 캡쳐(capture)가 상실되었을 때 발생
• onmediacomplete 메디어와 연관된 엘레멘트의 로딩이 완료되면 발생
• onmediaerror 엘레멘트의 메디어 파일의 로딩이 실패되었을 때 발생
• onmedialoadfailed (불량)엘레멘트의 메디어 파일의 로딩이 실패되었을 때 발생
• onmousedown 마우스가 개체 위를 눌렀을 때 발생
• onmouseenter 사용자가 마우스포인터로 개체 위에 들어갔을 때 발생
• onmouseleave 마우스포인터가 개체의 범위 밖으로 이동하면 발생
• onmousemove 마우스가 개체 위에서 이동하였을 때
• onmouseout 마우스가 개체 위에서 이탈하였을 때
• onmouseover 마우스가 개체 위로 이동하였을 때
• onmouseup 마우스가 개체 위 누른 것을 해제하였을 때
• onmousewheel 마우스 굴림단추가 개체 위에서 회전할 때 발생
• onmove 사용자나 스크립트로 창의 위치를 이동하였을 때
• onmoveend 편집할 수 있는 개체의 이동이 중지되었을 때 발생
• onmovestart 개체를 이동하기 시작하면 발생
• onopenstatechange 메디어바 플레이어의 열린 상태가 변경될 때 발생
• onoutofsync 엘레렌트가 연관된 시간과의 동기성을 상실하면 발생
• onpaste 시스템 클립보드(clipboard)로부터 데이터를 붙여넣기하였을 때
• onpause 엘레멘트의 시간이 일시중지(pause)하면 발생
• onplaystatechange 메디어바 플레이어에서 그 연주 상태가 변경되었을 때 발생
• onpropertychange 개체의 속성을 변경하면 그 개체에 발생
• onreadystatechange 개체의 상태(state)가 변경되면 발생된다.
• onrepeat 시간이 엘레멘트에서 반복되거나 다음번 작동이 시작될 때 발생
• onreset 입력폼이 리셋트(reset) 되었을 때
• onreset 시간이 begin 값이 되거나 resetElement가 호출되면 발생
• onresize 사용자나 스크립트로 창의 크기를 조절하였을 때
• onresizeend 사용자가 제어 선택된 개체의 크기 변경을 완료하면 발생
• onresizestart 사용자가 제어 선택된 개체의 크기를 변경하기 시작하면 발생
• onresume 시간개체가 일시중지에서 다시시작으로 회복되면 발생
• onreverse 엘레멘트에서 시간 개체가 뒤로 플레이되면 발생
• onrowclick rowover 비헤이버에서 마우스 커서가 줄을 선택하면 발생
• onrowenter 줄이 변경되고 개체에 새로운 값이 있음을 나타내기 위하여 발생
• onrowexit 현재 줄을 변경하기의 위한 데이터 원천 제어 바로 전에 발생
• onrowout rowover 비헤이버에서 마우스 커서가 줄에서 나가면 발생
• onrowover rowover 비헤이버에서 마우스 커서가 줄에 들어오면 발생
• onrowsdelete 리코드세트(recordset)에서 줄들이 삭제될 상황이 되면 발생
• onrowsinserted 현재의 리코드세트에 새로운 줄들이 삽입된 직후에 발생
• onsave 웹페이지가 저장, 북마크되거나 다른 페이지로 항해해 가면 발생
• onscroll 스크롤되는 개체에서 스크롤 바의 위치를 변경하였을 때 발생
• onseek 엘레멘트에서 탐색(seek) 작업이 수행되면 발생
• onselect 입력폼에서 입력 필드에서 문자열을 선택(select)하였을 때
• onselectionchange 문서의 선택된 부분의 상태가 변경되었을 때 발생
• onselectstart 개체가 선택되기 시작하면 발생
• onshow 메디어바 플레이어가 보이게 되면 발생된다.
• onstart MARQUEE 개체에서 반복하는 각 루프가 시작될 때 발생
• onstop 사용자가 중지 단추를 클릭하거나 웹 페이지를 닫을 때 발생한다
• onsubmit 입력폼(form)이 송신(submit) 되었을 때
• onsyncrestored 엘레멘트와 그 관련 시간 사이의 동기화가 회복되면 발생
• ontimeerror 시간을 지정하는 오류가 일어나면 발생
• ontrackchange ASX 파일에서 정의한 playList에서 트랙이 변경되면 발생된다.
• onunload 사용자가 페이지에서 이탈했을 때
• onurlflip +time t:MEDIA 태그에 의해 ASF 파일이 플레이되면 발생

출처: https://heavening.tistory.com/23 [Good Heavening]