javascript 이벤트 정리

'이벤트'란 웹 브라우저 사용 중 발생하는 키보드, 마우스 등의 입력으로

이벤트가 발생될 때 작성된 자바스크립트 코드를 실행시키는 것을 '이벤트 처리'라고 한다.

​

​

*태그 속성은 이벤트 이름 앞에 on을 붙이면 된다.

​

<마우스 이벤트>

click : html 문서의 요소를 클릭 시 발생

dblclick : html 문서의 요소를 더블 클릭 시 발생

mousedown : 마우스 커서를 html 문서 내의 요소에 위치시키고 마우스 버튼을 누를 시 발생

mousemove : 마우스 커서를 html 문서 내의 요소 위에서 이동시킬 시 발생

mouseup : 마우스 커서를 html 문서 내의 요소 위에 위치시키고 버튼을 땔 시 발생

mouseover : 마우스 커서가 해당 요소 위에 위치할 경우 발생 (연속x)

mouseout : 마우스 커서가 해당 요소 위를 벗어날 때 발생

​

<키보드 이벤트>

keypress : 키보드 타이핑 시 발생, 누를 때 1회 발생하며 손을 떼기 전까지 계속 발생(한글 입력, 방향키, del키 등은 인식 x)

keydown : 키보드를 누를 때 발생, 눌러서 내려갈 때 1회 발생 (마우스 버튼도 해당)

*두개를 같이 작동 시 keydown이 먼저 발생

keyup : 키보드를 누른 후 뗄때 발생, 키보드가 올라올 때 1회 발생

​

<프레임/객체 이벤트>

load : 문서, 프레임, 객체 등이 웹 브라우저상에 로드가 완료 되었을 때 발생

resize : 문서 창,뷰의 크기가 resize 되었을 경우 발생

scroll : 문서 창,뷰가 스크롤 되었을 경우 발생

​

<form 이벤트>

change : 폼 요소 콘텐츠의 내용이 변경되었을 때 발생하는 이벤트

focus : 요소가 포커스 될 시 발생, 마우스 선택 or 커서가 위치

blur : focus의 반대. 요소에서 포커스가 없어질 때 발생, 마우스 선택 해제 or 커서 이동

select : <input>, <textarea> 요소 내 텍스트가 선택 될 시 발생

​

​

<이벤트 핸들러>

이벤트 발생시 실행하고자 하는 자바스크립트 함수

​

<이벤트 등록>

이벤트 종류와 이벤트 핸들러 연결

​

<폼 다루기>

DOM 인터페이스를 사용하여 폼의 값을 읽거나 수정 가능

​

<폼 제어>

select(), submit(), reset(), checked (true, false 값으로 설정)

​

​

<요소의 콘텐츠 접근 속성>

- innerHTML : 속성에 저장된 값을 html 태그로 해석한다.

- innerText: 속성에 저장된 값을 단순히 문자열로 해석한다.