JavaScriptのイベントを理解する

イベントオブジェクトとプロパティ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
リスナー関数の引数に受け取られるイベントオブジェクトから、プロパティでさまざまな値が調べられます。
講師:
07:53

字幕

このレッスンでは アドイベントリスナーメソッドで イベントに対して登録した 関数が受け取る イベントオブジェクトというものについて ご説明しその使い方についても 解説したいと思います まず現在開いている htmlドキュメント ドリームウィーバーCCで 開いているんですけども これには IDへブルーという 名前を定めた このIMG要素に対して エレメントを取り出して アドイベントリスナーで クリックした時 この処理を行ってください という設定がされています 処理の内容はというと アラートで エレメント取り出し要素の Alt属性の値 ここで言えばやはり Altはブルーになっていますので ブルーという文字を表示してください という設定になっています では確認してみましょう ファイルから ブラウザーでプレビューです このブルーのタイルですね これをクリックすると アラートの警告ダイアログが 表示されて Alt属性の ブルーという文字が表示されました ここではまだイベント イベントオブジェクトを使っていません 早速その イベントオブジェクトを確認してみましょう イベントオブジェクトというのは アドイベントリスナーの メソッドに定めた関数 これをリスナー関数という 呼び方もします リスナー関数が引数で受け取ります 今カッコの中は空っぽで 引数を受け取る準備が できていないんですけども ここに変数を立てましょう イベントオブジェクトと いう名前にしました これを確認してみたいと思いますが アラートでいちいち確認するのは うるさいので コンソールで見ましょう コンソールの ログ そしてイベントオブジェクト これはコピーを持ってきてしまった方が 確実ですね コピーします そしてアラートは 邪魔なのでいったんよけておきます コメントアウトです さてこれで保存をして 確認しましょう ブラウザーでプレビューします 今度はアラートではないので 画面に出てきませんから 表示の これはクロムなんですけども 開発管理で javascriptコンソールを出します そしてこのブルーのタイルを クリックすると マウスイベント イベントオブジェクトと 一括して言ったんですが その登録したイベントによって イベントのオブジェクトの 種類が少し変わります クリックはマウスのイベントなので マウスイベントというオが リスナー関数の 引数として受け取られます そしてその内容はこの三角を クリックすると出てくるんですが 色々ありますね 例えば クライアントX クライアントYと これはマウスイベントの場合の プロパティなんですけども イベントが起こった場所 具体的には マウスでクリックした座標ですね ちょっときれいな値になってます 250の210と 気持よいですね こういうきれいな値が出てくると これがイベントオブジェクト マウスイベントの イベントオブジェクトから プロパティとして取り出すことができます ではこのプロパティの値を 確認してみましょう さてコメントアウトした アラートを復活させましょう コメント 記号を削除して イベントオブジェクトを コピーして そして ペーストします クライアントXとしましょう Xを出したんだったら Yも知りたいですね ではeventobject. clientX これをコピーをして クライアントXをYに変えます ただし console.log の場合には複数の値を 見ることができるんですが アラートの場合には1個しか 値が出せません ではこれを1個にしてしまえばいいですね 配列 角かっこで囲んで 配列とすれば 1個の配列の値として 2つが表示されるということが できますので これはちょっとしたテクニックです では一旦保存して 確認してみます ブラウザーでプレビューです javascriptコンソール は出しませんけども アラートが出ますから確認できますね クリックすると 528の193 今度は半端な数字になりますね クリックした位置によって座標は 変わってきます 571、249 左上の方 486,165と 言う風にでてきました このようにしてクリックした マウス座標を調べることができます もう1つぐらい プロパティ、イベントオブジェクトの プロパティを確認したいと思います ではまた javascriptコンソールを出して 3回クリックしたんで 3つ分出てますが 1番最後のやつで確認してみましょう ターゲットというのがありますね そしてIMG これはクリックした アドイベントリスナーを 登録した要素が IMGなんで IMGと そしてID属性を設定していますから そのID属性はブルーと出てきました このターゲットを 使ってみたいと思います 今度は アドイベントリスナーを 登録する 要素 今はIMGのブルーという IDをつけた要素になっているんですが これを UL要素 親の要素の方に変えてしましましょう ではIDを設定して コンテナーとします そして get element by ID がありますがここで コンテナーの方を設定します これでもクリックした 座標がXY座標が出てきます そして さらに 今さっき確認した ターゲットですね この時ターゲットというのは やはりクリックした 要素になりますので 例えば ブルーの要素をクリックすればブルー というこのIMGが 調べられて そのプロパティを取ることになります ではIDはブルーにしかないんですが Altはみんなにありますので このターゲットの Altとしましょう そして保存をします プレビュー、ブラウザーでプレビューしますと ブルーをクリックすると 座標とブルーと出てきますね 先ほどまではブルーしか クリックして何も起こんなかったんですが 今回はUL要素に設定しましたので クリックのイベントリスナーですね 紫をクリックしても 座標が出てきますし パープルというのがAlt属性でした あるいは赤をクリックすると レッドということで ターゲットのプロパティで クリックした要素を調べることができます もちろんこの何もないところを クリックすると 何もでてきません これはクリックされたのは IMGでなくて UL要素ということになってしましますので UL要素にはAlt属性が 設定されていなかったので 空っぽということになっています このレッスンでは アドイベントリスナーで 登録したリスナー関数が受け取る イベントオブジェクトに対して そのプロパティを表示する ということを試してみました

JavaScriptのイベントを理解する

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

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

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

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

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