Event Handing

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|우클릭하면 나오는 팝업창 제어|

좋은 웹페이지 즐겨찾기