loadイベントについて調べてみた

理解が十分でなかったので、loadイベントについてきちんと調べてみた。

DOMContentLoaded と load の違い

まずはここから。

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).

出典: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

DOMContentLoaded イベントは stylesheets や images を待たずに発火されるが、load イベントは 完全にページがロードされたら発火される。

load がサポートされるタグ

  • body
  • frame
  • iframe
  • img
  • input type="image"
  • link
  • script
  • style

出典: http://www.w3schools.com/jsref/event_onload.asp

load イベントの定義

f:id:kotaroito2002:20150307180357p:plain

Event.target: common object whose contained resources have loaded

A user agent must dispatch this event when the DOM implementation finishes loading the resource (such as the document) and any dependent resources (such as images, style sheets, or scripts).

出典: http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load

と書かれているので、これらのタグがサポートされるのも納得。