Latest web development tutorials
×

JavaScript コース

JavaScript コース JavaScript 簡単な紹介 JavaScript 使用法 JavaScript 輸出 JavaScript 文法 JavaScript ステートメント JavaScript ノート JavaScript 変数 JavaScript データの種類 JavaScript オブジェクト JavaScript 関数 JavaScript スコープ JavaScript イベント JavaScript 文字列 JavaScript 演算子 JavaScript 比較します JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript 型変換 JavaScript 正規表現 JavaScript エラー JavaScript デバッギング JavaScript 可変リフト JavaScript strictモード JavaScript 不適正使用 JavaScript フォーム認証 JavaScript 予約済みキーワード JavaScript JSON JavaScript void JavaScript コードの仕様

JS 関数

JavaScript 関数定義 JavaScript 関数の引数 JavaScript 関数呼び出し JavaScript クロージャ

JS HTML DOM

DOM 簡単な紹介 DOM HTML DOM CSS DOM イベント DOM EventListener DOM 要素

JS 応用チュートリアル

JavaScript オブジェクト JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp オブジェクト

JS ブラウザ BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript ポップ JavaScript 時間指定イベント JavaScript Cookies

JS 倉庫

JavaScript 倉庫 JavaScript テスト jQuery JavaScript テスト Prototype

JS 例

JavaScript 例 JavaScript Objectインスタンス JavaScript ブラウザのオブジェクトインスタンス JavaScript HTML DOM 例 JavaScript サマリー

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

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

JavaScriptをHTML DOMイベント

HTML DOM JavaScriptは、HTMLがイベントに反応する能力を持っています。

マウスオーバー・ミー
私をクリックしてください


イベントに反応

イベントが発生したときに我々は、ユーザーがHTML要素をクリックしたときのように、JavaScriptを実行することができます。

HTMLのイベント属性にユーザーが要素をクリックしたときにコードを実行するには、JavaScriptコードを追加します。

onclickの=のJavaScript

HTMLイベント例:

  • ユーザは、マウスをクリックすると
  • ページがロードされると
  • イメージがロードされたとき
  • マウスが要素の上に移動すると
  • 入力フィールドが変更された場合
  • あなたは、HTMLフォームを送信すると
  • ユーザーがキーをトリガーすると

この例では、ときにクリックされた<H1>要素上のユーザーは、その内容を変更します:

<!DOCTYPE HTML>
<HTML>
<ボディ>
<H1のonclick = "this.innerHTML = 'メールで送信'">テキストをクリック!</ H1>
</ BODY>
</ HTML>

»をお試しください

この場合、イベントハンドラから関数を呼び出すには:

<!DOCTYPE HTML>
<HTML>
<ヘッド>
<スクリプト>
関数changetext(ID)
{
id.innerHTML = "メールで送信";
}
</スクリプト>
</ HEAD>
<ボディ>
<H1のonclick = "changetext(この)">テキストをクリック!</ H1>
</ BODY>
</ HTML>

»をお試しください


HTMLのイベント属性

HTML要素にイベントを割り当てるには、イベント属性を使用することができます。

ボタン要素のonclickイベントに割り当てられました:

<ボタンのonclick = "displayDate() ">ここをクリックしてください</ button>の

»をお試しください

上記の例では、関数は、ボタンがクリックされたときdisplayDateが実行される名前。


イベントを割り当てるには、HTMLのDOMを使用してください

HTML DOMは、HTML要素にイベントを割り当てるためにJavaScriptを使用することができます:

ボタン要素のonclickイベントに割り当てられました:

<スクリプト>
。のdocument.getElementById( "myBtnです」)のonclick =関数(){displayDate()};
</スクリプト>

»をお試しください

上記の例では、関数は、指定されたdisplayDateのid = myButn "HTML要素に割り当てられています。

Javascriptの関数が実行されたときにボタンをクリックします。


onloadとonunloadイベント

ユーザーが入力するか、ページを離れたときにonloadとonunloadをイベントがトリガされます。

onloadイベントは、訪問者が検出され、ページの正しいバージョンをロードするには、この情報に基づいているブラウザの種類とブラウザのバージョンを使用することができます。

onloadとonunloadイベントクッキーを処理するために使用することができます。

<ボディのonload = "checkCookies() ">

»をお試しください


onchangeイベント

onchangeイベントは、多くの場合、使用する入力フィールドの検証を組み合わせました。

ここでのonchangeを使用する方法の例です。 ユーザは、入力フィールドの内容を変更したときに、大文字()関数を呼び出します。

<input type = "text"のid = "fnameに"のonchange = "大文字()">

»をお試しください


onmouseoverイベントれるonmouseout

onmouseoverイベントONMOUSEOUT関数にHTML要素または除去要素の上部にときに、ユーザのマウスの動きをトリガーするために使用することができます。

シンプルなのonmouseover-れるonmouseoutインスタンス:

マウスオーバー・ミー

»をお試しください


れるonmousedown、onMouseUpのとonclickのイベント

れるonmousedown、onMouseUpのとonclickのマウスクリックイベントのすべての部分を構成しています。 マウスクリックの完了は、それがonclickイベントをトリガするときにまず、マウスボタンが離されたときに、マウスボタン、イベントれるonmousedownトリガーをクリックすると、それは、最終的にイベントをonMouseUpのトリガ、およびます。

シンプルれるonmousedown-onMouseUpのインスタンス:

ありがとうございました


より多くの例

れるonmousedownおよびonMouseUpの
ユーザは、マウスボタン、画像の交換を押下します。

onloadイベント
ページの読み込みが終了すると、メッセージボックスを表示します。

ONFOCUS
入力欄にフォーカスがあるときに、背景色を変更します。

マウスイベント
ポインタが要素の上に移動すると、その色を変更し、テキストのうち、ポインタが移動し、その色が再びいつ変更されます。