Window Event

DOMContentLoaded

HTML 문서가 완전히 구문 분석되고 모든 지연된 스크립트(<script defer src="…">와 <script type="module">)가 다운로드되고 실행될 때 발생합니다. 이미지, 서브프레임, 비동기 스크립트와 같은 다른 항목의 로드가 끝날 때까지 기다리지 않습니다.

스타일시트의 로드를 기다리지 않습니다. 하지만 지연된 스크립트는 스타일시트를 기다리며 DOMContentLoaded 이벤트는 지연된 스크립트 이후에 대기열로 추가됩니다. 또한, 지연되지 않거나 비동기가 아닌 스크립트(예: <script>)는 이미 구문 분석된 스타일시트가 로드될 때까지 기다립니다.

window.addEventListener("DOMContentLoaded", (event) => {
  console.log("DOM fully loaded and parsed");
});

message

예를들어 다른 윈도우 브라우저에서 Window.postMessage()를 호출하면, 윈도우가 메세지를 받았을 때 메세지 이벤트가 시작된다.

const targetFrame = window.top.frames[1];
const targetOrigin = "https://example.org";
const windowMessageButton = document.querySelector("#window-message");

windowMessageButton.addEventListener("click", () => {
  targetFrame.postMessage("hello there", targetOrigin);
});

window.addEventListener("message", (event) => {
  console.log(`Received message: ${event.data}`);
});