ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptのイベントメカニズムを簡単に分析_基礎知識
JavaScriptのイベントメカニズムを簡単に分析_基礎知識
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-05-16 15:56:441440ブラウズ
イベントとは何ですか?
JavaScript は、ユーザーまたはブラウザーがページを操作するときにページ上で発生するイベントを通じて HTML と対話します。
ページが読み込まれると、これはイベントです。ユーザーがボタンをクリックすると、これがイベントとなります。イベントの別の例としては、任意のキーを押す、ウィンドウを閉じる、ウィンドウのサイズを変更するなどがあります。
開発者は、これらのイベントを使用して、JavaScript でエンコードされた応答を実行できます。これにより、ボタンがウィンドウを閉じたり、ユーザーにメッセージが表示されたり、データが検証されたり、その他の発生する可能性のあるほぼすべてのタイプの応答が行われます。
イベントは、ドキュメント オブジェクト モデル (DOM) のレベル 3 です。すべての HTML 要素には、JavaScript コードをトリガーできる一連のイベントがあります。
例:
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
これにより、次の結果が生成されます。「Hello」ボタンをクリックすると、onclick イベントによってsayHello() 関数がトリガーされます。
onsubmit イベントの種類:
もう 1 つの最も重要なイベント タイプは onsubmit です。このイベントは、フォームを送信しようとすると発生します。したがって、フォーム検証の対象をこのイベント タイプに設定できます。
以下は、その使用法を示す簡単な例です。ここでは、フォーム データを Web サーバーに送信する前に、 validate() 関数を呼び出します。 validate() 関数は、フォームが送信される場合は true を返し、そうでない場合はデータは送信されません。
例:
<html>
<head>
<script type="text/javascript">
<!--
function validation() {
all validation goes here
.........
return either true or false
}
//-->
</script>
</head>
<body>
<form method="POST" action="t.cgi" onsubmit="return validate()">
.......
<input type="submit" value="Submit" />
</form>
</body>
</html>
onmouseover と onmouseout:
これら 2 つのイベント タイプは、写真やテキストで素晴らしい効果を作成するのに役立ちます。マウスを要素上に置くと、マウスが要素の外に移動すると onmouseout イベントが発生し、マウスが要素の上に移動すると onmouseover イベントが発生します。
例:
次の例は、グループ応答が次のとおりであることを示しています。
<html>
<head>
<script type="text/javascript">
<!--
function over() {
alert("Mouse Over");
}
function out() {
alert("Mouse Out");
}
//-->
</script>
</head>
<body>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>
これら 2 つのイベント タイプを使用して、さまざまな画像を変更したり、支援してくれるユーザーを作成したりできます。
HTML 4 標準イベント
標準の HTML4 イベントが参考のためにここにリストされています。以下のスクリプトは、このイベントで実行する Javascript 関数を表示します。
