JavaScriptのイベントを理解する

addEventListener()メソッドでイベントを扱う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
新しいブラウザではaddEventListener()メソッドでイベントを扱います。引数はイベント名と関数です。
講師:
04:39

字幕

このレッスンでは イベントを扱うメソッドとして アドイベントリスナー というものをご紹介し その使い方をご説明したいと思います 今ドリームウィーバーCCで開いている htmlドキュメントでは アドイベントリスナー は使わずに クリックした時のオンクリックという イベントハンドラーで処理を行っています 画面には 9つの四角いカラーの画像が おいてあります その中のブルーなんですが ブルーに対してID属性ブルーと いう名前が付けられていて そのブルーのエレメントを get element by IDで 取ってきたうえで オンクリック クリックしたらという イベントハンドラーを使って 警告のダイアログを出す という処理を行っています 現在の処理を確認しましょう ファイルからブラウザーでプレビューします そしてブルーのタイルをクリックすると 警告のダイアログが開いて ブルーというタイルの名前が 表示されています ちなみにダイアログに表示された ブルーという文字なんですが Alt属性に 設定してありますので アラートの中で エレメントのAlt属性を表示しなさい という設定になっていました さてこのオンクリックという イベントハンドラー これは特に 古いブラウザーも対象にしたい という時には いまだに有効です むしろ古いブラウザーを取り込むためには オンクリックを使った方がいいんですけども 最近のブラウザー モダンブラウザーとよく言われますけども それを使う場合には アドイベントリスナーを 使った方が いろいろと機能が豊富で しかも主流として使われる仕様ですので ぜひ覚えておきたいところです さてMDN モジラデベロッパーネットワークの リファレンスを今開いて アドイベントリスナーの 項目を 構文は いくつかのパラメーター 引数が取れるんですが アドイベントリスナーの後に タイプ、リスナー この2つが必須になります 後はオプションですので今回は使いません タイプというのは どういうイベントの時に その処理を実行したいのか という指定になります イベントの指定です 次にリスナーというのは やりたい処理を関数として定義します ですからまず 設定したいエレメントを選んで アドイベントリスナーで 何が起きた時 今回はクリックですので クリックという文字を設定します そしてその後に関数を設定すると クリックをした時に その関数に書かれた処理が 実行されるということになります さてドリームウィーバーで開いた htmlドキュメントに戻りました もう一度処理の流れを簡単に確認しておくと ボディ要素に オンロード属性で initという関数を ボディを読み込み終わったら 実行しなさいということになっていて そのinitの関数の中で 先ほど説明したとおりの オンクリックの処理が 行わているわけなんですが ここを アドイベントリスナーに 書き換えます アドイベントリスナー そして オンクリックと違って イコールじゃないですね ここにイベントを指定します 文字列です そしてクリックしたらというのは クリックです オンはつきません そして関数なんですが 先ほどオンクリックに設定してあった 関数はこのまま使えます ただし 丸カッコで始まってますので 関数の後 丸カッコとじで終わらないといけませn これでいいでしょう ファイルを保存して ブラウザーでプレビューしましょう ではブルーのタイル 画像をクリックします 先ほどと動作は同じですけども 今回は オンクリックの イベントハンドラーではなくて アドイベントリスナーを 使いました このレッスンでは 今後新しいブラウザーで使われる イベントを扱うメソッド アドイベントリスナー についてご説明しました 引数は 最低限2つなんですが 第1引数に イベントの名前を文字列で そして第2引数に 処理したいことを 関数として定義するということで ここでは名前のない関数を 設定しました このようにすると 新しいブラウザーでイベントの処理が さまざまに行えます

JavaScriptのイベントを理解する

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

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

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

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

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