JavaScriptのイベントを理解する

preventDefault()メソッドでデフォルトの動きを止める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
イベントにともなう規定の動きを止めるpreventDefault()メソッドについてご説明します。
講師:
03:25

字幕

このレッスンでは イベントから通常起こる動作を やめてしまうという プリベントデフォルト というメソッドについてご説明します 今ドリームウィーバーCCで開いている htmlドキュメントには クリックに対して イベントリスナーが設定されています 設定している要素は IMG要素の ID属性ブルー のエレメントを取り出してそこに対して アドイベントリスナーで クリックした時に この処理を行ってください というリスナーを設定しています やってることはアラートでダイアログを出して その要素の Alt属性 具体的にはこのブルーという文字ですね これを表示るようにしています では動作を確認しましょう ファイルからブラウザーでプレビューで 画像が9つ表示されていますけれども その中のブルーをクリックすると アラートのダイアログが出て Alt属性に設定されていた文字 ブルーが表示されました ここでプリベントデフォルト というメソッドを使ってみたいと思います まず準備としてこのIMGの ブルーですね ID属性ブルーに対して ピンクを設定します Aのhdefで http ダブルスラッシュ 私のサイトにします fumiononaka .comということで このIMGに対して リンクを設定します 閉じましょう まだプリベントデフォルトの メソッドは使わない状態で確認します ファイルを保存して ブラウザーでプレビュー まずアイコンが指に変わりますね そしてクリックすると javascriptコード のイベントリスナーに設定した リスナー関数が呼び出されます ですからアラートは出るんですが ここでOKを押すと リンクが設定されていますので 私のサイトに飛びます リンクを設定された 要素をクリックすれば そのリンク先に飛ぶ これが規定の要素 デフォルトの動きなわけです これを止めてしまうというのが プリベントデフォルトです ではリスナー関数に プリベントデフォルト のメソッドの呼び出しを加えましょう これは オブジェクトに対して 設定する メソッドです コピーして持ってきて プリベントデフォルトと そしてメソッドですので丸カッコ2つ ということで この1行だけを加えました アラートはまだ残っていますね では保存して確認しましょう 保存をしたら ブラウザーでプレビューです 先ほどと同じように ポインターを合わせると指に変わります そしてクリックすると カラートーンダイアルが出てきて 今度は プリベントデフォルトで リンク先に飛ぶという 規定の動作 通常の動作が止められてしまっている ということなのです このレッスンでは そのイベントに伴って 通常行われる動作 それを止める プリベントデフォルトという メソッドについてご紹介をしました

JavaScriptのイベントを理解する

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

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

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

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

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