JavaScript - 이벤트 응용2 - 이벤트 타입

1. 폼
submit : 폼의 정보를 서버로 전송하는 명령인 submit시에 일어난다. form 태그에 적용된다.
change : 폼 컨트롤의 값이 변경 되었을 때 발생, input(text,radio 등), textarea, select 태그에 적용
blur : 엘리먼트에 포커스가 생겼을 때
focus : 포커스가 사라졌을 때 발생

2. 문서 로딩
웹페이지를 프로그래밍적으로 제어하기 위해서는 웹페이지의 모든 요소에 대한 처리가 끝나야 한다. 이것을 알려주는 이벤트가 load, DOMContentLoaded이다.

그런데 load 이벤트는 문서내의 모든 리소스(이미지, 스크립트)의 다운로드가 끝난 후에 실행된다. 이것을 에플리케이션의 구동이 너무 지연되는 부작용을 초래할 수 있다.

DOMContentLoaded는 문서에서 스크립트 작업을 할 수 있을 때 실행되기 때문에 이미지 다운로드를 기다릴 필요가 없다.

<script>

window.addEventListener('load', function(){

console.log('load');

})

window.addEventListener('DOMContentLoaded', function(){

console.log('DOMContentLoaded');

})

</script>

3. 마우스
아래 링크 참조
http://output.jsbin.com/pepib/4/

• click
  클릭했을 때 발생하는 이벤트. 
• dblclick
  더블클릭을 했을 때 발생하는 이벤트
• mousedown
  마우스를 누를 때 발생
• mouseup
  마우스버튼을 땔 때 발생
• mousemove
  마우스를 움직일 때
• mouseover
  마우스가 엘리먼트에 진입할 때 발생
• mouseout
  마우스가 엘리먼트에서 빠져나갈 때 발생
• contextmenu
  컨텍스트 메뉴가 실행될 때 발생

참고 출처
https://opentutorials.org/module/904/6762
https://opentutorials.org/module/904/6765
https://opentutorials.org/module/904/6766