Event Handing

• addEventListner
  addEventListner() 메서드는 지정한 이벤트가 발생할때 설정한 함수를 호출

  • 문법

    document.addEventListener(event, function, useCapture);

    event : 반응할 이벤트 유형
    function : 이벤트가 발생할 때 실행할 함수
    useCapture : eventTarget으로 전송하기 전, 등록된 function으로 타입의 이벤트 전송여부를 나타내는 불린값 ( 생략 가능 )

• .innerText
  html 태그를 해석하지 않고 텍스트를 그대로 출력함

• .innerHTML
  html 태그를 해석해서 출력해줌

• .preventDefault
  이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소함

• .createElement
  HTML 태그를 생성

  documnet.createElement('br'); // br태그 생성

• .toDataURL
  이 메소드는 매개 변수에 저장된 형식(기본값은 PNG)의 이미지 표현이 포함된 데이터 URL를 반환함

  canvas.toDataURL(type, encoderOptions);

• type
  기본 형식 유형은 image/png

• encoderOptions
  이미지 품질 표시(0 ~ 1)
  기본값은 0.92
  

• .href

• .download

Event

자바스크립트 관련 event를 모아놓음
주기적으로 업데이트 예정

• UI event
  사용자가 웹페이지가 아닌 UI와 상호작용할 때 발생됨

  이벤트	설명
  scroll	사용자가 페이지를 위아래로 스크롤 할 때
  load	웹페이지의 로드가 완료되었을 때
  unload	웹페이지가 언로드 될 때(새로운 페이지를 요청했을 때)
  error	브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 없을 때
  resize	브라우저의 창 크기를 조정했을 때

• 키보드 이벤트
  사용자가 키보드를 이용할 때 발생

  이벤트	설명
  keyup	키를 땔 때
  keydown	사용자가 키를 처음 눌렀을 때
  keypress	사용자가 눌렀던 키의 문자가 입력되었을 때

• 포커스 이벤트
  |이벤트|설명|
  |-|-|
  |focus|요소가 포커스를 얻었을 때|
  |blur|요소가 포커스를 잃었을 때|

• 폼 이벤트
  |이벤트|설명|
  |-|-|
  |input|<input>,<textarea>요소 값이 변경되었을 때|
  |submit|사용자가 버튼키를 이용하여 폼을 제출할 때|
  |reset|리셋 버튼을 클릭할 때|
  |change|선택상자, 체크박스, 라디오 버튼의 상태가 변경되었을 때|
  |select|텍스트를 선택했을 때|
  |copy|폼 필드의 콘텐츠를 복사했을 때|
  |paste|폼 필드의 콘텐츠를 붙여넣을 때|
  |cut|폼 필드의 콘텐츠를 잘라냈을 때|

• 마우스 이벤트
  |이벤트|설명|
  |-|-|
  |mouseup|눌렀던 마우스 버튼을 땔 때|
  |mousedown|마우스를 누르고 있을 때|
  |mousemove|마우스를 움직였을 때|
  |mouseout|요소 바깥으로 마우스를 움직였을 때|
  |mouseenter|마우스 포인터가 들어올 때|
  |mouseleave|마우스 포인터가 벗어날 때|
  |click|사용자가 동일한 요소 위에서 마우스 버튼을 눌렀다 땔 때|
  |dbclick|두 번 눌렀다 땔 때|
  |contextmenu|우클릭하면 나오는 팝업창 제어|