JavaScriptイベント


HTML イベントは、HTML 要素に対して発生するものです。

JavaScript を HTML ページで使用すると、これらのイベントをトリガーできます。

HTML イベント

HTML イベントは、ブラウザーのアクションまたはユーザーのアクションです。

以下は HTML イベントの例です:

  • HTML ページの読み込みが完了

  • HTML 入力フィールドが変更されました

  • HTML ボタンがクリックされました

通常、イベントが発生すると、何かを行うことができます。

JavaScript は、イベントがトリガーされたときに一部のコードを実行できます。

イベント属性は HTML 要素に追加でき、HTML 要素は JavaScript コードを使用して追加できます。

一重引用符:

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

二重引用符:

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

次の例では、onclick 属性が button 要素 (およびコード) に追加されますが追加されています) :

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>

</body>
</html>

サンプルの実行»

オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください

上記の例では、JavaScript コードは id= のコンテンツを変更します。 「デモ」要素。

次のインスタンスでは、コードは独自の要素のコンテンツを変更します (this.innerHTML を使用):

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<button onclick="this.innerHTML=Date()">现在的时间是?</button>

</body>
</html>

Run Instance»

「Run Instance」ボタンをクリックして表示しますオンライン インスタンス

NoteJavaScript コードは通常、数行のコードです。より一般的なものは、イベント属性を通じて呼び出されます:

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

</body>
</html>

インスタンスの実行»

オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックしてください

一般的なHTMLイベント

こちら一般的な HTML イベントのリスト:

EventDescription
onchangeHTML 要素の変更
onclickユーザーが HTML 要素をクリックする
onmo HTML 上の useover ユーザー要素 マウスを移動します
onmouseout ユーザーがマウスを HTML 要素から遠ざけます
onkeydown ユーザーがキーボードのキーを押します
onload ブラウザはページの読み込みを完了しました

その他のイベント リスト: JavaScript リファレンス マニュアル - HTML DOM イベント。

JavaScript でできることは何ですか?

イベントはフォームの検証、ユーザー入力、ユーザーの動作、ブラウザーのアクションを処理するために使用できます:

  • ページの読み込み時にトリガーされるイベント

  • ページが閉じられたときにトリガーされるイベント

  • ユーザーがボタンをクリックしてアクションを実行します

  • ユーザー入力の正当性を検証します

  • など...

複数のメソッドを使用して JavaScript イベント コードを実行できます:

  • HTML イベント属性は JavaScript コードを直接実行できます

  • HTML イベント属性は JavaScript 関数を呼び出すことができます

  • HTML 要素に独自のイベント ハンドラーを指定できます

  • イベントの発生を防ぐことができます。

  • など...

Note HTML DOMの章では、イベントとイベントハンドラーについて詳しく学びます。