JavaScriptイベント

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 要素に対して独自のイベントハンドラーを指定できます。

待って…

学び続ける

新しいファイル

<!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>

提出するリセットコード

自動運転