JavaScriptイベント

JavaScript はブラウザーでシングルスレッドモードで実行されます。ページが読み込まれた後、ページ上のすべての JavaScript コードが実行されると、JavaScript コードの実行にはトリガーイベントのみが使用されます。

ユーザーのマウスまたはキーボード入力を受信すると、ブラウザーは対応する DOM ノードで対応するイベントを自動(dòng)的にトリガーします。ノードが対応する JavaScript 処理関數(shù)にバインドされている場合、その関數(shù)は自動(dòng)的に呼び出されます。

JavaScript イベント

JavaScript によって検出できる Web ページ內(nèi)の動(dòng)作は、JavaScript イベントと呼ばれます。以下は一般的な JavaScript イベントの例です:

1. ページのコンテンツがブラウザーによってロードされます

2. ユーザーがボタンをクリックします

イベントは通常、JavaScript 関數(shù)と組み合わせて使用??されます。、つまり、イベント駆動(dòng)型関數(shù)を使用して、必要な特定の機(jī)能を?qū)g行します。

一般的な HTML イベント

一般的な HTML イベントのリストをいくつか示します:

イベント

説明

onchange HTML 要素の変更

onclick ユーザーが HTML 要素をクリックする

onmouseover ユーザーが HTML 上にいるelement マウスを移動(dòng)します

onmouseout ユーザーが HTML 要素からマウスを移動(dòng)します

onkeydown ユーザーがキーボードのキーを押します

onload ブラウザがページの読み込みを完了しました

onclick イベントオブジェクト、onclick イベント次の例に示すように、トリガーされます:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<script type="text/javascript">
function hello(){
    var name = document.getElementById("name").value;
    if( name == "") {
        alert("請(qǐng)輸入你的姓名！");
        return false;
    } else {
        alert(name + "，你好！");
    }
}
</script>
</head>
<body>
  姓名：<input type="text" id="name" />
  <input type="button" onclick="hello()" value="確定" />
</body>
</html>

上の例では、onclick イベント屬性が [OK] ボタンに設(shè)定されており、その値は JavaScript 関數(shù) "hello()" です。つまり、ボタンがクリックされると、onclick イベント屬性が設(shè)定されます。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<button onclick="displayDate()">點(diǎn)這里</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>

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

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

ページが読み込まれるときにイベントがトリガーされます。ユーザーがボタンをクリックしてユーザー入力コンテンツの正當(dāng)性を確認(rèn)するなどのアクションを?qū)g行すると、イベントがトリガーされます。

複數(shù)の方法を使用できます。 JavaScript イベントコードを?qū)g行するには:

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

HTML イベント屬性は JavaScript 関數(shù)を呼び出すことができます。

HTML 要素に対して獨(dú)自のイベントハンドラーを指定できます。

待って…

學(xué)び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <script type="text/javascript"> function hello(){ var name = document.getElementById("name").value; if( name == "") { alert("請(qǐng)輸入你的姓名！"); return false; } else { alert(name + "，你好！"); } } </script> </head> <body> 姓名：<input type="text" id="name" /> <input type="button" onclick="hello()" value="確定" /> </body> </html>

提出するリセットコード

自動(dòng)運(yùn)転