JavaScript30_Day1
Fri, Jul 24, 2020
1-minute read
挑戰JavaScript30的第一天
知道可以利用 window 監聽 keydown 事件來偵測使用者按下的按鍵
window.addEventListener('keydown', e => {
console.log(e.key); //可以知道按下的字母是什麼字
console.log(e.keyCode); //字母所代表的鍵碼
})
原來 HTML 標籤 data 是一個可以自行定義的屬性,並用 JavaScript 來操作各個 audio
<audio data-key="65" src="sounds/clap.wav"></audio>
window.addEventListener('keydown', e => {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
audio.play(); //會撥放對應案件的音效
})
以及 currentTime 對 audio 音效檔進行重製
window.addEventListener('keydown', e => {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
audio.currentTime = 0; //讓音效檔回歸初始點
audio.play(); //會撥放對應案件的音效
})
transitionend 監聽事件
利用transitionend事件,監聽所有 block 上有 transition 的 CSS 屬性,並且透過 propertyName 來判斷是哪個 css 屬性:
const block = document.querySelector('.block');
// 監聽所有 block 上有 transition 的 CSS 屬性
block.addEventListener('transitionend', e => {
console.log(e.propertypeName)
})
結尾
過程中嘗試以自己的能力去仿造一個與主題相同的功能,最後是每次按住按鍵沒辦法觸發audio,知道currentTime這個屬性。
最後對於用 window 監聽事件感到好奇,改成 document 是不是也可以,答案是可以的,但還是不清楚 window 和 document 的差別,特別去查了相關資料去了解一番。