JavaScriptのイベントメカニズムを簡単に分析_基礎知識-jsチュートリアル-php.cn

JavaScriptのイベントメカニズムを簡単に分析_基礎知識

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

リリース： 2016-05-16 15:56:44

オリジナル

1440 人が閲覧しました

イベントとは何ですか?

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 関数を表示します。

201564104949263.jpg (616×728)