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

はじめに

この記事は、JavaScript チュートリアルの学習ログです。

学習したもの

MDN にある JavaScript のチュートリアルを学習しました。

今日学習した対象箇所へのリンク

イベントのイントロダクション（どの方式を使えば良い？まで学習。残りは明日）

概要

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

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

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

分かった事

用語

イベントハンドラー
- イベントに発火した時に実行される (通常はユーザー定義の JavaScript 関数) コードのブロックの事
イベントリスナー
- イベントハンドラーの別名。ただし、厳密に言えば一緒に動作する別のものです。イベントリスナーはイベントの発生を監視し、イベントハンドラーは発生したイベントの応答として動作するコードです。
イベントハンドラーを登録する
- イベントの発火に対する応答としてコードのブロックが実行されるように定義する事

イベントは JavaScript 固有の物ではない

例えば、Web ページの JavaScript のイベントと、Node.js のイベントは違う。
また、ほとんどのプログラミング言語はいくつかのイベントモデルを持っている。

今の段階では、「イベントは異なるプログラミング環境では異なることがある」とだけ理解しました。
インラインイベントハンドラーは使ってはいけない（使わない方が良い）

イベントハンドラーの登録方法には「イベントハンドラー HTML 属性(インラインイベントハンドラーとも言う)」があるが、使わない方が良い。

理由としては、下記のようなものがある。
- HTML と JavaScript を混在させると可読性が下がる
- JavaScript は一箇所にまとめた方が使いまわし出来る
- １つのファイル中に HTML と JavaScript がまとまっていても、属性の数が増えれば増えるほどに管理が難しくなる
addEventListener(), removeEventListener() を利用した時のメリット
- addEventListener()を使うと同じリスナーに複数のハンドラーを登録できる
- removeEventListener()で以前追加したリスナーを削除できる
イベントは下記いづれかの方式を使う
- イベントハンドラープロパティー
  
  力とオプションに欠けるが、ブラウザー間での互換性が高い(IE8 でも動く)。
- DOM レベル 2 イベント(addEventListener()他)
  
  上記よりもっとパワフルですが、もっと複雑でちょっと互換性に欠けます (IE9 以降でサポート)。

分からなかった事

用語として書いてみて理解できたような気はしたのですが、イベントハンドラーとイベントリスナーの違いがよく分からなかったです。理解度が曖昧な感じがしています。

まとめ

チュートリアルを進めているとしれっと説明なく、聞いた事のない単語（イベントの発火とか）が出てきて戸惑います。分からない単語は適宜調べながら学習を進めていきたいと思います。

次の学習ログは「その他、イベントに関する概念」から学習を再開します。

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

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

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