Document Object Model APIs

Document Object Model APIs

  • account_tree
  • settings_backup_restore
  • bug_report

InterfaceEvent

DOM에서 발생하는 모든 이벤트를 다루는 객체이다.

하위 트리 탐색

  • Constructor

    이벤트 생성자 함수로써 새로운 사용자 정의 이벤트 인스턴스를 생성한다.

  • [[Prototype]]

    • Methods

      • composedPath()

        리스너(listener)가 호출될 객체의 배열인 이벤트 경로를 반환한다. ShadowRoot.mode가 딛한 상태에서 shadow root가 생성된 경우 shadow tree의 노드는 포함되지 않는다.

      • preventDefault()

        Element 객체가 기본적으로 가지고 있는 이벤트 동작을 차단한다.

      • stopImmediatePropagation()

        동일한 이벤트에서 다른 리스너들이 불려지는 것을 차단한다.

      • stopPropagation()

        이벤트 캡처링(capturing)과 버블링(bubbling) 전파를 차단한다.

    • Properties

      • bubble

        이벤트가 DOM을 통해 버블링되는지 여부를 가지고 있다.

      • cancelable

        이벤트를 취소할 수 있는지 여부를 확인할 수 있다.

      • cancelBubble

        이벤트 핸들러에서 리턴하기 전에 값을 true로 설정하면 이벤트 전파를 방지한다.

      • composed

        shadow DOM 경계를 넘어 표준 DOM으로 전파되는지 여부를 나타낸다.

      • currentTarget

        이벤트가 등록된 직접적인 Element 객체를 참조한다.

      • defaultPrevented

        preventDefault() 메소드가 이벤트에서 호출되었는지 여부를 확인할 수 있다.

      • eventPhase

        현재 처리중인 이벤트 흐름의 위상을 나타낸다.
      • isTrusted

        사용자 작업에 의해 이벤트가 생성될 때와 스크립트가 이벤트를 생성하거나 수정하는 경우에 대한 값을 가지고 있다. 사용자 작업에 의해서 생성된 이벤트일 경우에는 true, 스크립트에 의해 생성된 이벤트일 경우에는 false를 갖는다.

      • returnValue

        이벤트에 대한 기본 작업이 금지되었는지 여부를 조회한다. 기본적으로 true로 설정되어 기본 동작이 발생한다. 이 속성을 false로 설정하면 기본 작업이 금지된다.

      • target

        실제로 이벤트가 발생한 Element 객체를 참조한다. 이벤트 버블링, 캡처 단계에서도 참조가 가능하다.

      • timeStamp

        이벤트가 생성된 시간(밀리초:milliseconds)로 조회한다.

      • type

        이벤트의 유형을 문자열로 조회한다.

  • Events

    다양한 이벤트를 분류별로 정리했다.

    • Animation

      애니메이션과 관련된 이벤트

      • cancel

        애니메이션이 취소되었을 때 발생한다.

      • finish

        애니메이션이 종료될 때 실행한다.

      • remove

        애니메이션이 제거될 때(즉, 활성 바꾸기 상태) 실행한다.

    • Document

      • DOMContentLoaded

        HTML 문서가 완전히 로드되어 구문 분석이 되고 모든 지연된 스크립트(<script defer>, <script type="module">)가 다운로드 및 실행되면 발생한다.

      • languagechange

        사용자의 기본 언어가 변경될 때 발생한다.

      • readystatechange

        documentreadyState 속성이 변경되면 발생한다.

      • selectionchange

        현재 문서에서 텍스트의 선택이 변경되면 발생한다.

      • selectstart

        사용자가 숨김 상태의 요소를 찾아 웹브라우저가 해당 콘텐츠를 보여주려고 할 때 이벤트가 발생한다.

      • visibilitychange

        웹브라우저 탭(tab)의 콘텐츠가 visible 또는 hidden 상태로 변경될 때 발생한다.

    • Element

      • beforematch

        요소의 hidden 애트리뷰트가 until-found  값을 갖는 경우에 발생한다.

      • contextlost

        CanvasRenderingContext2D 또는 OffscreenCanvasRenderingContext2D 객체가 손실되면 발생한다.

      • contextrestored

        CanvasRenderingContext2D 또는 OffscreenCanvasRenderingContext2D 객체가 손실된 후 복원되면 발생한다.

      • slotchange

    • Form

      폼 처리와 관련된 이벤트

      • change

        <input>, <select>, <textarea> 입력 요소의 설정 값이 변경되면 발생한다.

      • invalid

        입력 요소가 유효성을 확인하고 제약 조건을 충족하지 않을 때 발생한다.

      • reset

        양식의 입력 값을 초기화할 때 발생한다.

    • Frame and Container

      프레임과 컨테이너와 관련된 이벤트

      • resize

        창(window) 크기가 변경될 때 발생한다. 일반적으로 뷰포트 크기 변경이 있는 경우 발생한다.

      • scroll

        요소가 스크롤 될 때 발생한다.

      • scrollend

        스크롤이 완료되면 VisualViewport, Document 또는 Element에서 발생한다.

    • Media

      미디어 처리와 관련된 이벤트

      • abort

        일반적인 에러외의 원인으로 전체 미디어 리소스가 로드되지 못할 때 발생한다.

      • canplay

        재생 가능한 미디어 리소스가 확보된 경우에 발생한다.

      • canplaythrough

        readyStateHAVE_ENOUGH_DATA로 변경될 때 발생한다.

      • cuechange

        TextTrack이 현재 표시되는 큐를 변경했을 때 발생한다.

      • durationchange

        duration 속성이 업데이트되면 발생한다.

      • emptied

        미디어 요소가 load() 메소드에 의해 다시 초기화될 때 발생하거나 치명적인 오류가 있어 미디어 리소스를 준비하지 못할 때 발생한다.

      • ended

        미디어 끝에 도달했거나 더 이상 사용할 수 있는 데이터가 없어 재생 또는 스트리밍이 중지되면 발생한다.

      • error

         window에서 사용할 리소스 로드에 실패했거나 사용할 수 없는 경우 발생한다.

      • loadeddata

        미디어의 현재 재생 위치에 있는 프레임이 로드를 완료하면 발생한다.

      • loadedmetadata

        메타 데이터(metadata)가 로드되면 발생한다.

      • loadstart

        웹브라우저가 미디어 리소스를 다운로드하기 시작하는 시점에 발생한다.

      • mute

        트랙의 소스가 일시적으로 미디어 데이터를 제공할 수 없을 때 발생한다.

      • pause

        재생이 일시 중지될 때 발생한다.

      • play

        play() 메소드 또는 autoplay 속성의 결과로 paused 속성이 true에서 false로 변경되면 발생한다.

      • playing

        버퍼링을 위해 일시 중지 또는 중지된 후 다시 재생될 때 발생한다.

      • progress

        웹브라우저가 리소스를 로드할 때 주기적으로 발생한다.

      • ratechange

        재생 속도가 변경될 때 발생한다.

      • seeked

        사용자가 미디어 재생시 타임라인에서 재생 위치를 이동하거나 건너뛰기를 완료할 때 발생한다.

      • seeking

        사용자가 미디어 재생시 타임라인에서 재생 위치를 이동하거나 건너뛰기를 시작할 때 발생한다.

      • stalled

        미디어 리소스를 다운로드하려고 했지만 예기치 않게 다운로드하지 못할 때 발생한다.

      • suspend

        미디어 리소스가 로딩이 중지된 시점에 발생한다.

      • timeupdate

        재생 위치(currentTime)가 변경되었을 때 발생한다.

      • unmute

        트랙의 소스가 미디어 데이터를 제공할 수 없는 기간 후에 다시 한번 미디어 데이터를 제공할 수 있을 때 발생한다.

      • volumechange

        미디어의 볼륨이 변경되었을 때 발생한다.

      • waiting

        일시적인 재생할 데이터의 부족으로 인해 재생이 중지되면 발생한다.

    • Mouse

      포인팅 장치 관련 이벤트

      • pointerlockchange

        입력 장치의 포인터가 잠기거나 잠금이 해제되면 발생한다.

      • pointerlockerror

        입력 장치의 포인터 잠금이 실패하면 발생한다. 기술적인 이유이거나 권한 부족으로 거부될 경우에 발생할 수 있다.

    • Network

      네트워크 관련 이벤트

      • offline

        웹브라우저가 네트워크에 대한 액세스 권한을 잃고 Navigator.onLine 값이 false로 전환되면 발생한다.

      • online

        웹브라우저가 네트워크에 액세스하고 Navigator.onLine의 값이 true로 전환되면 발생한다.

    • Print

      프린트와 관련된 이벤트

      • afterprint

        문서가 인쇄를 시작하거나 인쇄 미리보기가 닫힌 후에 발생한다.

      • beforeprint

        문서가 인쇄되거나 인쇄를 위해 미리보기가 될 때 발생한다.

    • Progress

      처리 관련 이벤트

      • progress

        미디어 데이터를 가져오는 중일 때  발생한다.

    • Resource

      리소스 관련 이벤트

      • abort

        리소스가 완전히 로드되지 않았을 때 발생한다. 오류의 결과는 아니다.

      • beforeunload

        window, document, resources가 unload되려고 할 때 발생한다.

      • error

         window에서 사용할 리소스 로드에 실패했거나 사용할 수 없는 경우 발생한다.

      • load

        웹 문서내 리소스와 그것에 의존하는 리소스들의 로딩이 완료되면 발생한다.

      • unload

        문서나 하위 리소스가 언로드(unload)일 때 발생한다.

    • Screen

    • UI

      UI와 관련된 이벤트

      • cancel

        <dialog> 요소가 닫힐 때 또는 <input> 요소에서 파일 선택기를 사용할 때 선택을 취소하고 이전에 선택했던 동일한 파일을 다시 선택할 때 발생한다.

      • close

        대화 상자가 닫히면 HTMLDialgElement에서 발생한다.

    • View

      뷰와 관련된 이벤트

      • fullscreenchange

        지정 요소가 전체 화면 모드로 전환되거나 해제될 때 발생한다.

      • fullscreenerror

        전체 화면 모드로 전환하거나 외부에서 전환하려고 시도하는 동안 오류가 발생하면 요소로 전송되는 이벤트이다.

    • WebSocket

      웹 소켓 관련 이벤트

      • error

        WebSocket 네크워크 요청 작업 중에 오류가 발생했을 때 발생한다.

      • open

        웹 소켓과의 연결이 열리면 이벤트가 발생한다.

상속 계층 탐색

Object

  • Methods

    • hasOwnProperty()

      객체가 특정 프로퍼티를 가지고 있는지를 블린(boolean) 값으로 반환한다.

    • isPrototypeOf()

      해당 객체가 다른 객체의 프로토타입 체인에 속한 객체인지를 체크한다.

    • propertyIsEnumerable()

      매개 변수의 속성이 열거가능(enumerable)한지 여부를 체크한다.

    • toLocaleString()

      객체를 나타내는 문자열을  작동하는 지역(locale)의 방식으로 출력이 된다.

    • toString()

      객체를 나타내는 문자열을 반환한다.

    • valueOf()

      객체의 원시(primitive) 값을 반환한다.

  • Properties

    • constructor

      객체의 생성자 함수를 참조한다.

    • __proto__

      상속된 [[Prototype]] 참조하거나 설정가능하며 일반적으로 실제 코드상에서는 잘 사용되지 않는다. ECMAScript에서 사용되지 않는 비표준이지만 최신 웹브라우저에서는 비공식적으로 지원하고 있다. 따라서 곧 표준 속성으로 지원될 확률이 높다.

      현재는 표준 사양에 명시되었다.

지원 웹브라우저