JavaScriptのイベントを理解する

イベントの配信を止める

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
イベントの伝わる流れには、バブリングとキャプチャがあり、stopPropagation()メソッドで配信が止められます。
講師:
07:18

字幕

このレッスンでは 子の要素から親の要素と いう流れと 親の要素から子の要素へ という流れの2つがあります このレッスンでは そのイベントの流れの扱い方 違いについてご説明します 今ドリームウィーバーCCで開いている htmlドキュメントは UL要素 IDコンテーナーに対して そのエレメントを取り出して アドイベントリスナーで クリックのイベントに対して リスナーを登録しています 内容はというと クリックした 座標 X座標とY座標 それからクリックした ターゲットとなっている要素の Alt属性 これらのIMG要素にはみな Alt属性が設定してありますので それをアラートで表示する ということになっています では現在の動きを確認しましょう ファイルからブラウザーでプレビューです 例えばこのピンクをクリックすると クリックした座標とピンクという Alt属性 それから赤をクリックすると XY座標と 赤、レッドという 属性の値が表示されました それでは今度素要素の方ですね IMGの要素の方にも イベントリスナーを加えてみましょう IMG要素の ブルーなんですけども ブルーのタイルには ID属性としてブルーが設定してあります ではこれに アドイベントリスナーで イベントリスナーを登録します 基本的にはここと同じ 感じでいきますので コピーしてしまいましょう コピーをして ペーストします そして IDを ブルーをコピーして get element by IDで ブルーです アラートはちょっと邪魔なので 消してしまいます そしてイベントオブジェクト console.logで 出しているんですが 両方とも同じイベントオブジェクトですと どちらだけわかりませんので ここはそうですね イベントオブジェクトの ターゲットの フォルトとしましょう そうすると javascriptコンソールでは まず親のほうだと イベントオブジェクトの内容が 表示され ブルーのタイルの方ですと ブルーという文字が このAlt属性の文字ですね が設定されるということになります では保存して確認してみましょう ファイルを保存して ブラウザーでプレビューです まずピンクをクリックすると 先ほどと同じですね 座標とピンクというAlt属性が表示されます 開発管理で javascriptコンソールを 出しておきましょう 今のイベントが出ますので 一旦これはクリアします そして今度はこのブルーの方ですね クリックをします アラートの内容は 基本的にXY座標と Alt属性同じなんですが javascriptコンソールの方には 2つ与えられています ブルーが先で イベントオブジェクトの内容ですね 後になっています つまり 子要素のイベントが先に起こって それから親の UL要素の イベントが呼び出されると いうことになっています この子から親へという流れのことを バブリング 泡が昇っていくような感じなので バブリングと言います 実はこれの前に キャプチャーというフェーズがあります キャプチャーという流れです これは親から子です つまりまず最初にキャプチャーで 親から子にイベントが伝わり そして最後にターゲットまで来ると 今度はバブリングで上がってくる ということになっています イベントを登録する時に そのどちらのフェーズといいますけど 流れのことをフェーズと言いますが フェーズに登録するのか ということが指定できます では指定をしてみましょう 今見た通りデフォルトでは バブリングになっています それをキャプチャー 親から子の流れを先取りしたい という場合には アドイベントリスナーの 3つ目の引数を設定します 1つ目がイベントですね 2つ目が長いですが 関数、リスナー関数になります その後に trueという値を設定すると これはキャプチャー 親から子の流れを先に取ると その流れに対して イベントを登録したことになります ということは 今度は親の UL要素ですね UL要素 のイベントの方が伝わって そしてリスナー関数こちらが先に 呼び出されることになります 確認してみましょう ファイルを 保存して ブラウザーでプレビューです まずjavascriptコンソールを 出しましょう 表示の 開発管理で javascriptコンソールです もういきなり青をクリックしてしまいましょう そうすると先ほどは ブルーという文字が表示されましたね、まず つまりバブリング、子から親の流れです ところがその前に キャプチャーに登録しましたので コンソールを見てみると マウスイベントの方が先に表示されています つまりUL要素に登録した リスナー関数の方が 先に呼び出されているということですね 別に後でも先でも どうでもいいんじゃないかと 思うかもしれません この使い方をちょっとご紹介しましょう では3つ目の引数trueを取って デフォルトの バブリングフェーズですね に戻します ということは 子の方が先にイベントを受け取る そしてイベント止めてしまえ ということができます これはイベントオブジェクトを コピーして持ってきて それに対して ストッププロパゲーション これは関数ですのでカッコカッコです プロパゲ-ションというのは 広がるということです 広まる、配信される その配信を止めてしまいます このブルーがクリックされた時ですね ブルーに対してだけこの アドイベントリスナーが 行われていますので ブルーをクリックした時だけ このリスナー関数が実行されて 流れが止まります どうなるか確認してみましょう ファイルを保存して ブラウザーでプレビューです 今度はコンソールは出さなくていいでしょう まずピンクをクリックすると アラートが出てきますね 赤をクリックすると レッドと出てきます ではブルーをクリックします これクリックしてるんですけど、一生懸命 何も出てきません というのは ブルーの方が先にイベントを捕らえて そこでイベントを止める、つまり 親の方にイベントは 伝わらないので 親のUL要素に 登録したリスナー関数が呼び出されない ということになるんです このレッスンでは イベントの流れ ダブリングとキャプチャー そしてその流れを止める ストッププロパゲ-ションという メソッドについてご説明しました

JavaScriptのイベントを理解する

あらかじめ決められた出来事が起こったときに発生するメッセージをJavaScriptでは「イベント」と言います。このコースではJavaScriptの基礎を学んだ方を対象に、マウス操作やデータの読み込みなどよく使われるイベントについて解説します。また関数の定義や処理の仕方などを実際にスクリプトを書きながら説明します。

2時間45分 (23 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年11月23日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。