JavaScriptのイベントを理解する

イベントリスナーを除く

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
動的に加えた要素を除き、処理が済んだイベントリスナーを削除します。
講師:
09:13

字幕

このレッスンでは htmlドキュメントに ダイナミックに加えた DOM DOM要素を 削除するという処理について ご説明します 今画面には9つの サムネールの並んだページが 出ています その1つに マウスポインターを重ねると 解像度の高い画像が出てきます そしてマウスポインターを外すと 消えると それぞれ同じように 重ねたサムネールの画像が 大きい画像が表示される という風になっています この処理を完成させるには どうしたらいいかということについて これからご説明します 今ドリームウィーバーで開いている htmlドキュメントは 画像をダイナミックに 要素として加える ところまではできています けれど消すところができていません 加えるところはどうしたかというと まずアドイベントリスナー なんですけども gridというクラスの ul要素に対して イベントリスナーを登録し マウスが重なったら リスナー関数を実行しなさい ということで マウスが重なったターゲットの 要素を見てそのタグが imgである つまりimg要素であることを確認した上で div要素をダイナミックに作り それからイメージの 要素もダイナミックに作って そのイメージのソースを 設定し エレメントの階層構造を作って 表示をしています ここまでの動作を一応確認してみましょう ファイルから ブラウザーでプレビューです サムネールに マウスポインターを重ねると 解像度の高い画像が出てきます けれども 外しても消えないんですね ですからどんどんと画像が 重なって表示されてしまいます このマウスポインターが サムネールから外れたら 表示が消えるという風にしたいと思います マウスポインターが外れたら というイベントは マウスアウトになります ではそのイベントリスナーを 誰に登録したらいいかというと マウスポインターを重ねた このターゲットですね img要素に重ねた時ということなんですが このターゲットに対して マウスポインターが外れたらという イベントリスナーの登録をします コピーを持ってきます そしてアドイベントリスナー これもコピーで持ってきてしまいましょう コピーを持ってきます イベントは マウスアウトです そしてリスナー関数の名前を決めましょう クリアとします このクリアを ファンクションとして 定義するわけですけれども やはりイベントオブジェクトを 受け取ります そして 中カッコ始まり中カッコ閉じと まず最初の段取り 準備のところはだいたい おなじみですね ターゲットを取ります ターゲットというのは イベントオブジェクト に対して どこでイベントが起こったのかと これは imgの要素ですね imgの要素に重なった時に そこから外れたらという イベントを登録していますから imgの要素は取られます そして次に 親の要素を取ります 親のノードですね ターゲットの 親 ということでimgの親ですから liの要素ですね、リストです マウスが外れた時に除きたいのは 高解像度の イメージ 動的に作った このイメージですね でもそれはdiv要素の中に入れてあります ですからimgの要素だけでなくて その親のdiv要素ごと 除きたいと思います そしてこのdiv要素については プレビューというクラス名が ついていますから これを頼りにして 除くべきノード 要素を定めたいと思います このdiv要素というのは li要素の中に入っているわけですから そのペアレントに聞けばいいわけですね それに対して クエリセレクター div要素でプレビューと というクラス名がついたものが合うでしょう という風に聞くわけです そしてそれを除くべきノードとして 変数に入れます これで準備が整いました では 除いてくださいとお願いするのは ペアレントですね リストの要素になります liです それに対して リムーブチャイルド でリムーブノード こうすることで div要素ごと 高解像度のイメージが消えてくれます ではファイルは保存して 確認してみましょう ブラウザーでプレビューです マウスポインターを重ねると 高解像度の画像が出てきて 外すと消える 出てきて消える よさそうですね ところがちょっと問題があります 一旦リフレッシュしますけれども そして 開発管理から javascriptの コンソールを表示します 特にエラーは出てないですね これから出ますのでご注意ください マウスポインターを重ねます 高解像度の画像が出ます 外します 消えます もう一度入れますと 外した時に 赤いエラーが出てきます なぜでしょう 他のサムネールだと 大丈夫です でもこちら 先ほど1回重ねたものだと 3とエラー回数が増えてますね どんどん増えます この下の真ん中のサムネールも さっき一度重ねました 重ねます 外すと どんどんエラーが増えていきますね 初めて重ねた時は 大丈夫なんですが もう一度重ねると エラーが追加される ということになっています この原因をはっきりさせて 問題を解決しましょう マウスポインターを重ねると このリスナーが動いて マウスアウトの イベントリスナーが加わります そしてこの処理が行われて 削除 要素の削除が行われるんですが また重なると またアドイベントリスナーで リスナー関数が追加されるんですね ですから外した時 2回実行されます 1回目はちゃんと 要素を削除できるんですが 2回目 削除すべき要素はもうないわけですから 削除する要素がありません ということになってしまいます ですからこの リスナー関数を実行した時 アドイベントリスナー マウスアウト このイベントリスナーは 削除しなきゃいけないんですね これをコピーして持ってきます 削除するには アドイベントリスナーをリムーブに変えます そうするとマウスポインターが重なって 外したら消してね と言って消した後1回消せば このリスナー関数が リスナーから除かれますので また重なった時に 重複してリスナー関数が 登録されることがなくなります 確認しましょう ファイルを保存して ブラウザーでプレビューします javascriptのコンソールを 出しておきましょうね 重ねます 高解像度の画像が出ました 外します 消えました 重ねます 何度重ねて外しても エラーはでなくなりました このレッスンでは マウスが重なった時に 動的に加えた要素を マウスが外れたら 削除するという処理について ご説明しました 削除するのはリムーブノードなんですけども リスナー関数 の処理が終わった時 片付けなければいけないものがある その時には リムーブイベントリスナー を使うということにご注意ください

JavaScriptのイベントを理解する

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

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

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

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

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