JavaScript はブラウザーでシングルスレッド モードで実行されます。ページが読み込まれた後、ページ上のすべての JavaScript コードが実行されると、JavaScript コードの実行にはトリガー イベントのみが使用されます。
ユーザーのマウスまたはキーボード入力を受信すると、ブラウザーは対応する DOM ノードで対応するイベントを自動的にトリガーします。ノードが対応する JavaScript 処理関数にバインドされている場合、その関数は自動的に呼び出されます。
JavaScript イベント
JavaScript によって検出できる Web ページ内の動作は、JavaScript イベントと呼ばれます。以下は一般的な JavaScript イベントの例です:
1. ページのコンテンツがブラウザーによってロードされます
2. ユーザーがボタンをクリックします
イベントは通常、JavaScript 関数と組み合わせて使用されます。 、つまり、イベント駆動型関数を使用して、必要な特定の機能を実行します。
一般的な HTML イベント
一般的な HTML イベントのリストをいくつか示します:
イベント
説明
onchange HTML 要素の変更
onclick ユーザーが HTML 要素をクリックする
onmouseover ユーザーが HTML 上にいるelement マウスを移動します
onmouseout ユーザーが HTML 要素からマウスを移動します
onkeydown ユーザーがキーボードのキーを押します
onload ブラウザがページの読み込みを完了しました
onclick イベント オブジェクト、onclick イベント次の例に示すように、トリガーされます:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script type="text/javascript">
function hello(){
var name = document.getElementById("name").value;
if( name == "") {
alert("请输入你的姓名！");
return false;
} else {
alert(name + "，你好！");
}
}
</script>
</head>
<body>
姓名：<input type="text" id="name" />
<input type="button" onclick="hello()" value="确定" />
</body>
</html> 上の例では、onclick イベント属性が [OK] ボタンに設定されており、その値は JavaScript 関数 "hello()" です。つまり、ボタンがクリックされると、onclick イベント属性が設定されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>JavaScript でできることは何ですか?
イベントはフォームの検証、ユーザー入力、ユーザーの動作、ブラウザーのアクションを処理するために使用できます:
ページが読み込まれるときにイベントがトリガーされます。ユーザーがボタンをクリックしてユーザー入力コンテンツの正当性を確認するなどのアクションを実行すると、イベントがトリガーされます。
複数の方法を使用できます。 JavaScript イベント コードを実行するには:
HTML イベント属性は JavaScript コードを直接実行できます。
HTML イベント属性は JavaScript 関数を呼び出すことができます。
HTML 要素に対して独自のイベント ハンドラーを指定できます。
待って…
次のセクション
