事件
我們發送許多事件,以便你可以輕鬆地響應簡報中的變化。使用 Reveal.on()
添加事件監聽器,使用 Reveal.off()
移除它們。
Reveal.on('eventname', callbackFunction);
就緒
當 reveal.js 加載了所有非異步依賴並準備好接受 API 調用時會觸發 ready
事件。要檢查 reveal.js 是否已經「就緒」,你可以調用 Reveal.isReady()
。
Reveal.on('ready', (event) => {
// event.currentSlide, event.indexh, event.indexv
});
我們還會在 .reveal
元素上添加一個 class 叫 .ready
,以便你可以用 CSS 掛鉤進這個狀態。
Reveal.initialize
函式還返回一個 Promise,當簡報準備好時解析。以下與添加 ready
事件的監聽器同義:
Reveal.initialize().then(() => {
// reveal.js 已準備好
});
幻燈片變更
每次幻燈片變更時,都會觸發 slidechanged
事件。事件對象包含當前幻燈片的索引值以及對前一幻燈片和當前幻燈片 HTML 元素的引用。
一些函式庫如 MathJax(參見 #226),可能會對幻燈片的變形和顯示狀態感到困惑。通常,這可以通過從此回調調用它們的更新或渲染函數來修復。
Reveal.on('slidechanged', (event) => {
// event.previousSlide, event.currentSlide, event.indexh, event.indexv
});
幻燈片轉換結束
slidechanged
事件在幻燈片變更時立即觸發。如果你寧願在幻燈片轉換完成並完全可見時調用事件監聽器,你可以使用 slidetransitionend
事件。slidetransitionend
事件包含與 slidechanged
相同的事件數據。
Reveal.on('slidetransitionend', (event) => {
console.log(event.currentSlide);
});
調整大小
當 reveal.js 更改簡報的縮放比例時,會觸發 resize
事件。
Reveal.on('resize', (event) => {
// event.scale, event.oldScale, event.size
});