JavaScriptのイベントを理解する

イベントでDOM要素をHTMLドキュメントに動的に加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
マウスイベントで動的につくったDOM要素を、HTMLドキュメントに動的に加えます。
講師:
07:56

字幕

このレッスンでは DOMの要素 DOM要素を ダイナミックに つまり動的に作って htmlドキュメントに 加える方法についてご説明をします 今ドリームウィーバーCCで開いている htmlドキュメント これは実質的なjavascriptコード というのはほとんど書いてありません ただ準備だけしてあって ボディ要素には オンロード属性で intという関数を 呼び出しなさいという風に指定してあって initという関数が 空っぽですけれども とりあえず定義してあります ですからエラーは起こりませんけれども 何も行動は実行されない ということになります 一応今のドキュメントの状態を 確認しますので ファイルから ブラウザーでプレビューします 特にエラーは起こっていません 開発管理で javascriptコンソールを 開いてみましても 何も起こりませんが クリックしても 何も発生しません 実質的なjavascriptコードを これから書いていきましょう まずどういうタイミングで イベントを起こすかということなんですが 先ほどの四角い サムネールありましたね あれはこのIMG要素なんですが そこにマウスポインターが重なったら クリックしません 重なったら これはマウスオーバーという イベントになるんですがその時に 要素を加える という処理を加えます ではそれを誰にお願いするか イベントリスナーの登録先ですね それはこのIMGの親である liのさらに親 li要素に加えたいと思います クラスとして gridという名前がついていますので この名前を頼りにして エレメントを取り出して イベントリスナーを加えます ではまず変数名ですが コンテナーとしましょう そしてドキュメントから探します クエリセレクターを使えば クラスから探すことができますので クラスの gridですね これでul要素が取れました ですからここに対して アドイベントリスナーの メソッドを 送るわけですけども この変数をコピーしましょう コピーして アドイベントリスナー 先ほど言いました通り マウスが重なった時 マウスオーバーですね その時に リスナーを登録して実行します ここでは関数に名前をつけることにします プレビューと いう関数 リスナー関数を定めることにします その関数をすぐに早速 ファンクションで 名前をコピーしましょう そして イベントリスナーの関数ですから イベントオブジェクトを受け取ります ちょっとカラーがおかしいですね えーと ダブルコーテンションが重なってますね ではカッコ、中カッコ閉じですね そしてまずは マウスポインターが重なった時 誰に重なったのかを確認します ターゲットですね 変数のターゲットにしましょう ターゲットにして イベントオブジェクトに聞けば わかります コピーをして ターゲットプロパティ これで マウスポインターが重なった イベントが起こった 要素がわかりますので その要素はIMGと合うと 期待しているんですが 場合によってはul 親の方を取ってしまうことがあります だからほんとにこのIMG要素 に重なったのかどうか ターゲットのタグを確認しましょう ifで ターゲットの タグネームです これが 文字列なんですけども IMGですということであれば マウスポインターが重なった要素が IMG要素だということが 確かめられますので その時に要素を加えます ではまず加える要素なんですが それを作りましょう ここがダイナミックに作るというところですね エレメントと ドキュメントでお願いします そして クリエート まあ名前その通りですね クリエートエレメント ここでタグ 要素の種類を入れるわけで divとしましょう div要素を作ります さてこの段階で作れたんですが もちろんドキュメントにはありません ドキュメントの中に入っておらず メモリにあるという状態になります 実際にドキュメントに加えたかったら ではどの要素の子に加えるのか ということを決めなければなりません マウスポインターが重なったのは IMGですが 要素はその親のli要素 リストに加えたいと思います ですから重なったターゲットの 親のノードですね ペアレントノード に対して 要素を加えると アペンドが加えです 子供として加えるので アペンドチャイルド というメソッドを使います そして エレメント 今動的に作った ダイナミックに作った エレメントの入った変数を入れます これでhtmlドキュメントの中の li要素に 動的に作ったdiv要素が 加わるということになります 確認してみましょう ファイルを保存して ブラウザーでプレビューします もちろん加えるといっても 空っぽのdiv要素ですから 画面には見えてきません ですからここでは確認のため クロム のブラウザーの中で右クリックをして 要素の検証をします そうすると htmlドキュメントの中の 要素の構造が現れるわけですが ボディの中に div要素 ID artがあって その中に 先ほど gridというのを取ってきましたようね アドイベントリスナーをした 要素ですけども その中に画像が エラー要素の中に入ってるわけなんですが 1番下見てみましょう 1番下に入ってるのは 左の画面でハイライトするから わかりますね それから右の画面でも この画像が入っている リストの要素 ここに対して div要素が加わります ここよく見ててください 今まだli要素の中には IMGの要素しかありません さてここでマウスポインターが重ねます よく見ててください div要素が加わりました これで目には見えませんけれども 画面には見えませんけれども ダイナミックに作られた div要素が li要素の子供として加わった ということがわかります このレッスンでは DOM要素をダイナミック 動的に作って それをhtmlドキュメントの中の 要素に加える方法について ご説明しました 要素を作るのは クリエートエレメントというメソッドです そして要素の子として加える時には アペンドチャイルドという メソッドを使います

JavaScriptのイベントを理解する

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

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

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

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

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