【学習ログ】MDN JavaScript チュートリアル (3 回目)

はじめに

学習したもの

過去のログを見返してみて、学習対象の全体像が伝わりにくいように思いましたので、試しにチュートリアルの文書構造？目次？のようなものを記載してみました。今後も記載を続けるかは未定です。

MDN JavaScript コーナー
┃
┗ チュートリアル
　 ┣ 完全な初心者向け
　 ┃ ┣ JavaScript の第一歩
　 ┃ ┃
　 ┃ ┣ JavaScript の構成要素
　 ┃ ┃ ┣ コード内で決定を下す　条件
　 ┃ ┃ ┣ ループコード
　 ┃ ┃ ┣ 関数　再利用可能なコードブロック
　 ┃ ┃ ┣ 独自の関数を構築する
　 ┃ ┃ ┣ 関数の戻り値
　 ┃ ┃ ┣ イベントのイントロダクション（本日の学習箇所）
　 ┃ ┃ ┗ 評価：イメージギャラリー
　 ┃ ┃
　 ┃ ┗ JavaScript オブジェクトの紹介
　 ┃
　 ┣ 中級者向け
　 ┗ 上級者向け

概要

チュートリアルで習った事の概要は下記の通りです。

イベントのイントロダクション

イベントの基本的な理論・ブラウザー上での振る舞い、プログラミング環境が変わるとイベントの振る舞いが変わることを学びました。

ノート・メモ

イベントオブジェクト
- イベントハンドラ関数内で event、evt、単に e などと名付けられる事が多い引数。イベントの追加機能や情報を提供する目的でイベントハンドラに自動的に渡される。
.target
- イベントオブジェクトの target プロパティは、常にイベントが生じた要素への参照。
onsubmit イベントハンドラー
- フォームでサブミットされるとサブミットイベントが発火する
preventDefault() 関数
- フォームの送信を抑制できる
バブリングとキャプチャリング
- モダンブラウザーでは、親要素を持つ要素においてイベントが発火すると、２つの段階に分けて動作する。キャプチャリング → バブリング。
キャプチャリング
- 要素の最上位の親要素 (\)から子要素・子孫要素に向かって順番に調べて、イベントハンドラーがキャプチャリング段階に登録されている場合に実行する。 .onclick とかだったら実際にクリックされた要素に到達するまで繰り返し調べる。
バブリング
- キャプチャリングとは逆に、実際にクリックされた要素の onclick イベントハンドラーがバブリング段階に登録されていたら、それを実行する。実行した後は、直上の親要素に移動して同じことをして、、、と最上位の親要素 (\)に到達するまで繰り返す。
モダンブラウザーのデフォルトでは、全てのイベントハンドラーはバブリング段階に登録されます。
stopPropagation() 関数
- ハンドラーのイベントオブジェクトで起動されると、このハンドラーは実行されますが、イベントが上位に伝播しないようにするので、これ以上のハンドラーは実行されなくなります。
イベントの移譲
- イベント移譲という概念は、たくさんある子要素のどれかしらがクリックされた際に何らかのコードを実行したいという場合に、個々の子要素一つ一つにイベントリスナーを設定するのではなく、親要素のイベントリスナーを設定すれば子要素のイベントリスナーからバブリングしてくるという事実に依拠しています。

分かった事

イベントは JavaScript のコアには属しておらず、ブラウザーの Web API に属している。

分からなかった事

学習初期段階として、イベントの触りはイメージ出来ている。（ような気がする）が、ちょっと突っ込んだ質問されたら分からない程度の理解度。ほとんど分かっていない。

まとめ

今回の学習範囲に限らず、分からない点があったら読み返すなり、調べるなりして理解する努力を続けていこうと思います。

最後までご覧頂きありがとうございました。

フロントエンド学習記(仮題)

主にフロントエンドについて学習した事を記録・メモしていきます。