ホーム HTML CSS XML JAVASCRIPT   PHP SQL MORE...   リファレンス 事例集    

DHTML - HTML イベント


HTMLイベントは、ブラウザのアクションをトリガできます。


HTML イベント

HTMLページのすべての要素には、JavaScriptをトリガするイベントがあります。

例えば、ユーザがボタンをクリックした時にある機能の実行を指示するために、ボタン要素の onClick イベントを使用することができます。 HTMLタグ内にイベントを定義することになります。

イベントの例:

  • マウスクリック
  • Webページや画像の読み込み
  • Webページのホットスポット上にマウスをのせる
  • HTMLフォームで入力フィールドを選択する
  • HTMLフォームを送信
  • キーストローク

次の例では、ユーザーがクリックすると h1 要素の内容が変ります:

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text</h1>
</body>
</html>

Try it yourself »

また、head セクションにスクリプトを追加して、イベントハンドラから関数を呼び出すこともできます:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text</h1>
</body>
</html>

Try it yourself »


HTMLイベントの詳細

HTMLの全イベントについては、完全なHTML DOMイベントオブジェクト・リファレンスを 見てください。


Examples

その他の例

onmousedown と onmouseup
ユーザがマウスボタンを押した時と放したときに画像を変更します。

onload
ページの読込みが終了したときに警告ボックスを表示します。