JSチュートリアル

JSホーム JSの紹介 JSどこへ JS出力 JSステートメント JS構文 JSコメント JS変数 JS Let JSConst JSオペレーター JS算術 JS割り当て JSデータ型 JS関数 JSオブジェクト JSイベント JS文字列 JS文字列メソッド JS文字列検索 JS文字列テンプレート JS番号 JS番号メソッド JSアレイ JS配列メソッド JS配列ソート JSアレイの反復 JSアレイ定数 JSの日付 JSの日付形式 JS DateGetメソッド JS日付設定メソッド JS数学 JSランダム JSブール値 JSの比較 JS条件 JSスイッチ JSループFor JSループフォーイン JSループの JSループWhile JSブレイク JSIterables JSセット JSマップ JS Typeof JS型変換 JSビット単位 JS RegExp JSエラー JSスコープ JSホイスト JS厳密モード JSこのキーワード JSアロー関数 JSクラス JS JSON JSデバッグ JSスタイルガイド JSのベストプラクティス JSの間違い JSパフォーマンス JS予約語

JSバージョン

JSバージョン JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE /エッジ JSの歴史

JSオブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクト表示 オブジェクトアクセサー オブジェクトコンストラクター オブジェクトのプロトタイプ オブジェクト反復可能 オブジェクトセット オブジェクトマップ オブジェクトリファレンス

JS関数

関数の定義 関数パラメーター 関数の呼び出し 関数呼び出し 機能適用 関数クロージャ

JSクラス

クラスイントロ クラス継承 クラス静的

JSAsync

JSコールバック JS非同期 JSの約束 JS Async / Await

JS HTML DOM

DOMイントロ DOMメソッド DOMドキュメント DOM要素 DOM HTML DOMフォーム DOM CSS DOMアニメーション DOMイベント DOMイベントリスナー DOMナビゲーション DOMノード DOMコレクション DOMノードリスト

JSブラウザBOM

JSウィンドウ JS画面 JSロケーション JSの歴史 JSナビゲーター JSポップアップアラート JSタイミング JSクッキー

JS Web API

WebAPIイントロ WebフォームAPI Web履歴API WebストレージAPI WebワーカーAPI Web Fetch API Web Geolocation API

JS AJAX

AJAXイントロ AJAX XMLHttp AJAXリクエスト AJAX応答 AJAXXMLファイル AJAX PHP AJAX ASP AJAXデータベース AJAXアプリケーション AJAXの例

JS JSON

JSONイントロ JSON構文 JSONとXML JSONデータ型 JSON解析 JSON文字列化 JSONオブジェクト JSON配列 JSONサーバー JSON PHP JSON HTML JSON JSONP

JSとjQuery

jQueryセレクター jQuery HTML jQuery CSS jQuery DOM

JSグラフィックス

JSグラフィックス JSキャンバス JSPlotly JS Chart.js JSグーグルチャート JS D3.js

JSの例

JSの例 JS HTML DOM JSHTML入力 JSHTMLオブジェクト JSHTMLイベント JSブラウザ JSエディター JS演習 JSクイズ JS証明書

JSリファレンス

JavaScriptオブジェクト HTMLDOMオブジェクト


JavaScript HTMLDOMイベント


HTML DOMを使用すると、JavaScriptはHTMLイベントに反応できます。

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

イベントへの対応

JavaScriptは、ユーザーがHTML要素をクリックしたときなど、イベントが発生したときに実行できます。

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

onclick=JavaScript

HTMLイベントの例:

  • ユーザーがマウスをクリックしたとき
  • Webページが読み込まれたとき
  • 画像が読み込まれたとき
  • マウスが要素の上を移動したとき
  • 入力フィールドが変更されたとき
  • HTMLフォームが送信されたとき
  • ユーザーがキーをストロークしたとき

この例では<h1>、ユーザーが要素をクリックすると、要素のコンテンツが変更されます。

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

この例では、関数はイベントハンドラーから呼び出されます。

<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">Click on this text!</h1>

<script>
function changeText(id) {
  id.innerHTML = "Ooops!";
}
</script>

</body>
</html>


HTMLイベント属性

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

onclickイベントをボタン要素に割り当てます。

<button onclick="displayDate()">Try it</button>

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


HTMLDOMを使用してイベントを割り当てる

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

onclickイベントをボタン要素に割り当てます。

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

上記の例では、という名前の関数が。displayDateを使用してHTML要素に割り当てられていますid="myBtn"

ボタンをクリックすると機能が実行されます。


onloadおよびonunloadイベント

onloadandイベントonunload、ユーザーがページに出入りしたときにトリガーされます。

このonloadイベントを使用して、訪問者のブラウザの種類とブラウザのバージョンを確認し、その情報に基づいて適切なバージョンのWebページをロードできます。

onloadandイベントonunload、Cookieを処理するために使用できます。

<body onload="checkCookies()">

onchangeイベント

このonchangeイベントは、入力フィールドの検証と組み合わせて使用​​されることがよくあります。

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

<input type="text" id="fname" onchange="upperCase()">

onmouseoverおよびonmouseoutイベント

onmouseoverandonmouseoutイベントは、ユーザーがHTML要素の上または外にマウスを置いたときに関数をトリガーするために使用できます

マウスオーバーミー


onmousedown、onmouseup、onclickイベント

、、、およびイベントはすべて、マウスクリックの一部ですonmousedown最初にマウスボタンがクリックされるとonmousedownイベントがトリガーされ、次にマウスボタンが離されるとonmouseupイベントがトリガーされ、最後にマウスクリックが完了するとonclickイベントがトリガーされます。onmouseuponclick

Click Me


その他の例


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


ページの読み込みが完了したときにアラートボックスを表示します。


フォーカスを取得したときに、入力フィールドの背景色を変更します。


カーソルが要素の上に移動したときに要素の色を変更します。


HTMLDOMイベントオブジェクトリファレンス

すべてのHTMLDOMイベントのリストについては、完全なHTMLDOMイベントオブジェクトリファレンスを参照してください。