之間有什麼區別`HTMLImports.whenReady`和`window.addEventListener（ 'WebComponentsReady'，函數（E）{`

Question

是什麼HTMLImports.whenReady和window.addEventListener('WebComponentsReady', function(e) {的區別

Polymer's official documentation說：

「你的主HTML文檔中定義的元素，從HTMLImports.whenReady（回調）定義的元素。當文檔中的所有進口完成加載調用回調函數。」

Webcomponents.org's official documentation on imports說：

在本地導入下，主文檔中的標記阻止導入的加載。這是爲了確保導入已經加載並且其中的任何已註冊元素都已升級。這種本地行爲很難填充，因此HTML Imports填充不會嘗試。相反，WebComponentsReady事件是此行爲的代表：

兩者之間的區別是什麼？

Answer 1

他們是差不多 *相同：兩者同時觸發。

所以你可以在callback和Event之間選擇你最喜歡的味道。

諾塔Bene的：如果由於某種原因，你獨自一人引用CustomElement.js填充工具（即沒有0​​功能），只有WebComponentsReady事件將被拋出。

（我更喜歡使用Event Handler因爲在第一種情況下，你需要確保的HTMLImports定義，因爲它是唯一記載的API here）

---

*：當然他們是不同的！所引用定義中列出了不同之處。

• 後者正在等待自定義元素被立即執行。它由CustomElement.js polyfill觸發。
• 第一個只等待導入被加載和解析。它被稱爲HTMLImports.js polyfill，剛好在{HTMLImportsLoaded}已發送。

但是在正常情況下，因爲自定義元素一旦被註冊就立即執行，這兩個事件將會一個接一個地發生。

時間順序

1. <link rel=import>.onload()，
2. {HTMLImportsLoaded}事件，
3. HTMLImports.whenReady()
4. {WebComponentsReady}事件

更多here。