スクールの復習js

まずは要件のフローチャートをかく
その上で、要件をまず完成させ、リファクタリング(コードの見直し)を行うことが大切
実際の現場では、リファクタリングは行えない
ライブラリのコードを読んでみてもいい

addEventListenerの第三引数にはtrue||false
false … DOM階層の下位から上位
true … DOM階層の上位から下位
にイベントの伝搬が起きる

event.currentTargetでそのイベントが起きた時の今の
.pageYoffsetをすることで、今のY座標の位置を取得
event.currentTargetとevent.targetは違う
event.currentTargetはそのイベントリスナーが起きた時の要素全体
event.targetはそのイベントリスナーが起きた時の具体的な要素

バブリング と キャプチャリングバブリング と キャプチャリング

querySelectorAllやgetElementsByClassNameで取得した全てを
Array.fromで新しく配列にする

Array.filter()で引数内の関数に合格した値を新しく配列にする

ドラッグアンドドロップ

HTMLの要素をドラッグ出来るようにするには draggable属性の値をtrueにする

ドラッグ&ドロップ　〜HTML5のAPIでドラッグ＆ドロップする方法〜 – Tamentai-labo

dataTransferオブジェクトに値をセットする方法もあるが、変数にevent.targetをいれる