最新のWeb開発のチュートリアル
×

JS チュートリアル

JS HOME JS 導入 JS どこへ JS 輸出 JS 構文 JS ステートメント JS 注釈 JS 変数 JS 演算子 JS 算術 JS 割り当て JS データの種類 JS 機能 JS オブジェクト JS 範囲 JS イベント JS ストリング JS 文字列メソッド JS 数字 JS 数のメソッド JS 数学 JS 日付 JS 日付形式 JS 日付の方法 JS 配列 JS アレイ方式 JS ブール値 JS 比較 JS 条件 JS スイッチ JS ループ For JS ループしながら JS ブレーク JS 型変換 JS 正規表現 JS エラー JS デバッギング JS 巻き上げ JS strictモード JS スタイルガイド JS ベストプラクティス JS 間違い JS パフォーマンス JS 予約語 JS JSON

JS フォーム

フォームバリデーション フォームAPI

JS オブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクトプロトタイプ

JS 機能

関数定義 ファンクションのパラメータ 関数の呼び出し 関数クロージャ

JS HTML DOM

DOM イントロ DOM メソッド DOM 資料 DOM 要素 DOM HTML DOM CSS DOM アニメーション DOM イベント DOM EventListener DOM ナビゲーション DOM ノード DOM ノードリスト

JS ブラウザ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS

JS 例 JS HTML DOM JS HTML 入力 JS HTML オブジェクト JS HTML イベント JS ブラウザ JS クイズ JS 概要

JS リファレンスマニュアル

JavaScript オブジェクト HTML DOM オブジェクト


 

JavaScriptイベント


HTMLイベントは、要素をHTMLに起こる「事」です。

JavaScriptはHTMLページで使用されている場合、JavaScriptはこれらのイベントに「反応する」ことができます。


HTMLイベント

HTMLイベントは、ブラウザがないもの、またはユーザが行うものにすることができます。

ここではHTMLのイベントのいくつかの例は以下のとおりです。

  • HTMLウェブページの読み込みが完了しました
  • HTML入力フィールドが変更されました
  • HTMLボタンがクリックされました

イベントが発生したとき、多くの場合、あなたが何かをしたいことがあります。

JavaScriptはイベントが検出されたときにコードを実行することができます。

HTMLは、HTML要素に追加する、JavaScriptコードと 、イベントハンドラ属性を可能にします。

単一引用符と:

< some-HTML-element some-event = ' some JavaScript ' >

二重引用符:

< some-HTML-element some-event = " some JavaScript " >

次の例では、 onclick (コード付き)属性は、button要素に追加されます。

<button onclick='getElementById("demo").innerHTML=Date()'>The time is?</button>
»それを自分で試してみてください

上記の例では、JavaScriptコードが持つ要素の内容に変更id="demo"

次の例では、コードが(使用して、独自の要素の内容に変更this .innerHTML ):

<button onclick="this.innerHTML=Date()">The time is?</button>
»それを自分で試してみてください

JavaScriptコードは、多くの場合、いくつかの行の長さです。 関数を呼び出すイベント属性を表示するには、より一般的です。

<button onclick="displayDate()">The time is?</button>
»それを自分で試してみてください

共通のHTMLイベント

ここではいくつかの一般的なHTMLのイベントのリストです:

イベント 説明
onchange HTML要素が変更されています
onclick ユーザーは、HTML要素をクリックします
onmouseover ユーザーは、HTML要素の上にマウスを移動します
onmouseout ユーザーは、HTML要素から離れてマウスを移動します
onkeydown ユーザは、キーボードのキーを押します
onload ブラウザがページの読み込みが完了しました

リストには、はるかに長いです: JavaScriptのリファレンスHTML DOMイベントw3ii


JavaScriptは何ができますか?

イベントハンドラは、ユーザ入力、ユーザーアクション、およびブラウザのアクションを処理し、検証するために使用することができます。

  • たびにページがロードを行うべきである事
  • ページが閉じられたときに行われるべきもの
  • ユーザーがボタンをクリックしたときに実行されるべきアクション
  • ユーザがデータを入力すると確認されるべきコンテンツ
  • もっと ...

多くの異なる方法がJavaScriptがイベントで動作させるために使用することができます。

  • HTMLイベント属性は、直接JavaScriptコードを実行することができます
  • HTMLイベント属性はJavaScript関数を呼び出すことができます
  • あなたは、HTML要素に独自のイベントハンドラ関数を割り当てることができます
  • あなたが送信されているか、処理されてからイベントを防ぐことができます
  • もっと ...

あなたは内のイベントとイベントハンドラについてより多くを学ぶことができますHTML DOMの章。


練習で自分自身をテスト!

演習1» 演習2» 演習3»