JavaScriptのイベントを理解する

イベントが起こった要素を調べる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
イベントが起こった要素のプロパティを調べて、条件判定の処理を行います。
講師:
05:32

字幕

このレッスンでは イベントの起こった要素の― プロパテイを調べて処理をする 方法についてご説明します 今 DreamWeaver で開いている― html ドキュメントには すでに javascript コードが書いてあって AddEventListener を使って 処理をしています そしてどんな処理かというと まず grid という クラスのついた要素 ここでは ul なんですけども ul 要素に対して AddEventListener で クリックしたらこの処理を行いましょう ということで具体的には クリックイベントの起こった― ターゲットの要素を調べ その親のノード removeNode という変数名が ついていますが それをさらにその親 ここでは ul 要素になるんですけども そこから削除するという形になっています どのような動作か確認してみましょう ファイルで ブラウザーでプレビューします IMG 要素をクリックすると その親のエラー要素が削除される― ということで どんどん消えていくんですが 困ったことがあります この辺クリックします 全部消えちゃうんですね ここをなんとかしましょう もう一度 要素を削除する javascript コードについて確認します まずイベントの起こった要素を取ります そしてその親のノード IMGの要素をクリックすれば その親というのはこのリストですね li要素 を取ります そしてそれを削除するわけですが それを削除する時に そのさらに親ということで 全部親 親という感じで 削除する対象と その削除する親を 調べているんですけれども これは IMG 要素をクリックした 場合にはいいです ところが IMG 要素―画像が なくなったところをクリックします その場合でも今度は ul 要素がクリックされた という風に解釈されます そうすると ul要素が ターゲットになってしまい その ul 要素の親から さらにその親を調べて削除するということで u 要素そのものが 消えてしまったということなんですね ですからこの部分をきちんと 点検しなければいけないということになります ではどうしたらいいかというと クリックされたものが はたして 目的のものなのかどうか つまり IMG なのかそうでないのか ということを調べたいと思います ここで console dir とすると 単に要素でなくて その要素をオブジェクトとしてとらえて その中のプロパティまで調べることができます ここででは target を入れてみましょう そして コードそのものは変えていませんけども まずは確認のテストです ではこれで一旦保存をして 確認しましょう ブラウザーでプレビューです では「表示」で 「開発管理」の 「 javascriptコンソール」を出します まず通常の場合クリックすると IMG がオブジェクトとして捕らえれて プロパティがどっと出てくるんですけども もし この画像が消えたところをクリックすると これでもイベントは取られます ul が取られてしまうんですね ですから ul 要素が削除されます その親から ということでまずかったわけなので 1回リロードして この時はいいわけです ではこの時とはどういう時なのかを 調べたいと思いますが この IMG 要素のオブジェクト プロパティを調べていくと ここに使えそうなのがあります tagName IMG 要素ですね ですから IMG 要素のタグは IMG ですから これを確認すれば IMG なのか それとも ul なのか わかるわけです その if 条件を設定して 削除するかしないかを決めればいい ことになります ではそのように書き換えましょう ではこの console.dir 確認が終わりましたので消しまして if 条件で使ってしまいましょう if 条件にして target の tagName が もしも IMG だとよかったんですね これは文字列にして 大文字の IMG であったら削除していい ということですね そうでなかったら スルーしてくださいということですから これでいいでしょう 確認します ファイルを保存して ブラウザーでプレビュー また右下からいきます ちゃんと消えてくれますね そしてこの何もないところを クリックすると ul要素があるんですけども 消えません なぜかというと ul 要素のタグは IMG ではないからです これで全部 まとめて消えてしまうということは なくなりました このタイトル部分は残っています このレッスンでは イベントが起こったターゲットの要素を調べて そのターゲットのオブジェクトの プロパティを確認したうえで 処理を分岐するという 方法についてご紹介しました

JavaScriptのイベントを理解する

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

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

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

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

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