22/06/27 학습내용 정리
이벤트(event)란?
자바스크립트는 사용자와 상호작용하기 위해 만들어졌다.
상호작용을 하려면 사용자가 웹 브라우저 상에서 특정한 동작을 해야하고, 웹브라우저는 그러한 사용자의 동작을 감지할 수 있어야 한다.
대표적인 예시로 사용자가 웹 상의 어떤 버튼을 클릭한다던가, 입력창에 글자를 타이핑하는 등의 행위가 있다.
이렇듯 웹 브라우저에서 일어나는 유용한 사건을 바로 '이벤트(event)'라고 한다.
이벤트(event)의 종류
이벤트의 종류에는 수십가지가 있지만, 그 중 자주 쓰는 것들은 정해져있기 때문에 처음부터 다 외울 필요는 없다. 지금은 간단하게 어떤 것들이 있는지 살펴보기만 하자.
UI Event
load: 웹페이지나 스크립트의 로드가 완료되었을 때
unload: 웹페이지가 언로드될 때(주로 새로운 페이지를 요청한 경우)
error: 브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 존재하지 않는 경우
resize: 브라우저 창의 크기를 조절했을 때
scroll: 사용자가 페이지를 위아래로 스크롤할 때
select: 텍스트를 선택했을 때Keyboard Event
keydown: 키를 누르고 있을 때
keyup: 누르고 있던 키를 뗄 때
keypress: 키를 누르고 뗏을 때Mouse Event
click: 마우스 버튼을 클릭했을 때
dbclick: 마우스 버튼을 더블 클릭했을 때
mousedown: 마우스 버튼을 누르고 있을 때
mouseup: 누르고 있던 마우스 버튼을 뗄 때
mousemove: 마우스를 움직일 때 (터치스크린에서 동작하지 않는다)
mouseover: 마우스를 요소 위로 움직였을 때 (터치스크린에서 동작하지 않는다)
mouseout: 마우스를 요소 밖으로 움직였을 때 (터치스크린에서 동작하지 않는다)
mouserenter: 해당 요소에 마우스 커서를 올려다놓았을때
mouseleave: 해당 요소에 마우스 커서를 빼낼때Form Event
input: input 또는 textarea 요소의 값이 변경되었을 때
change: select box, checkbox, radio button의 상태가 변경되었을 때
submit: form을 submit할 때 (버튼 또는 키)
reset: reset 버튼을 클릭할 때 (최근에는 사용 안함)Clipboard Event
cut: 콘텐츠를 잘라내기할 때
copy: 콘텐츠를 복사할 때
paste: 콘텐츠를 붙여넣기할 때콘솔(console)이란?
웹 브라우저 상에서 바로 자바크스립트 코드를 실행할 수 있는 도구이다.
수정사항이 현재 페이지 상에 즉각 반영된다.
실행방법은 웹 브라우저 상에서 개발자 도구를 열고 Elements 옆에 Console 버튼을 누르면 된다.
마우스 오른쪽 버튼 클릭 > 검사 > console 클릭
콘솔 버튼을 누르면 이렇게 코드를 작성할 수 있는 빈 공간이 나온다.
여기다 코드를 입력하면 현재 웹 브라우저에서 즉각 실행된다.
시험삼아 콘솔창에 alert('Hello, World!'.length)를 입력해 보았더니 13이라는 경고창이 뜬다!
그렇다면 콘솔(console)은 언제 활용할 수 있을까?
현재 보고있는 웹 사이트 상에서 간단하게 해결하고 싶은 문제가 있을 때,
혹은 현재 페이지 상에서 코드의 추가, 삭제, 변경 등을 통해 무언가를 즉각적으로 시험해보고 싶을 때 주로 사용한다.
가령 유튜브에서 댓글이벤트를 통해 추첨을 한다고 했을 때, 콘솔을 열어 코드를 입력하여 댓글이 달린 유튜브 웹페이지 상에서 바로 당첨자를 뽑아낼 수 있다.
