ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript クライアント イベント ドライバーの詳細な解釈 (グラフィック チュートリアル)

JavaScript クライアント イベント ドライバーの詳細な解釈 (グラフィック チュートリアル)

亚连
亚连オリジナル
2018-05-21 10:14:231300ブラウズ

ここで、JavaScript に基づくクライアント側のイベント ドライバーについて簡単に説明します。今からそれを皆さんと共有し、皆さんの参考にしてください。

オブジェクト指向の開発後、「一夜にして」ほぼすべての言語がオブジェクトに基づくことができ、JavaScript もオブジェクトベースの言語であることがわかっています。ブラウザ上でのユーザーの行動を「イベント」と呼び、その後に引き起こされるポップアップ、ブラウザサイズの変更、検証、バラバラなどの一連の動作を「イベントドリブン」と呼びます。もちろん今回もよくあるイベントを中心に紹介していきます。

追記: js スクリプトのサポートはブラウザーによって異なります。 ! !一部の以前のバージョンのブラウザではサポートされていない可能性があります。 ! !

1. クリックイベント(onClick)

クリックイベントとは何ですか?ユーザーがマウス ボタンをクリックすると、クリック イベントが生成されます。同時に、onclickで指定したイベントハンドラが呼び出されます。通常、ボタン (ボタン オブジェクト)、チェックボックス (チェック ボックス)、ラジオ (ラジオ ボタン)、リセット ボタン (リセット ボタン)、および送信ボタン (送信ボタン) で使用されます。

拡大トリック:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之单击事件</title>

</head>
<body>
<form>
  <script language="JavaScript">
    function aclick(){
      alert("你刚才单击了按钮");
    }
  </script>
  <input type="button" value="按钮" onclick= "aclick()" />
</form>

</body>
</html>

効果は次のとおりです:

2. Change イベント (onChange)

ユーザーがフォームの値を変更すると、onchange イベントがトリガーされます。

コードは次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之更改事件</title>
  <script language="JavaScript">
    function check() {
      alert("文本框的值发生了变化");
    }
  </script>
</head>
<body>
<form>
  <input type="text" value="这是一个文本框" name="name" onchange="check()"/>
</form>
</body>
</html>

効果は次のとおりです:

3. Select イベント (onSelect)

ページ上の要素が選択されると、onselect イベントがトリガーされます。

コードは次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之更改事件</title>
  <script language="JavaScript">
    function check() {
      alert("文本框的值发生了变化");
    }
  </script>
</head>
<body>
<form>
  <input type="text" value="这是一个文本框" name="name" onchange="check()"/>
</form>
</body>
</html>

効果は次のとおりです:

4. Loading イベント (onLoad)

Loading イベントは、Web ページが開かれたときにトリガーされるイベントです。

コードは次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之加载事件</title>
  <script language="JavaScript">
    function check(){
      alert("莫急莫急,小D正在骑马来的路上,O(∩_∩)O哈哈~");
    }
  </script>
</head>
<body onload="check()">
</body>
</html>

効果は次のとおりです:

5. Beforeunload イベント (beforeunload)

正確には、「ページを離れる前のイベント」と呼ぶのが適切です。 "、現在のタブをクリックしたとき、閉じるボタンが押されたときにこのイベントがトリガーされます。

コードは次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之卸载前事件</title>
  <script language="JavaScript">
    function check1(){
      alert("你真的要离我而去呢?╥﹏╥...");
    }
  </script>
</head>
<body onbeforeunload= "check1()">
<h1>这是用来验证卸载前事件的页面</h1>
</body>
</html>

効果は次のとおりです:

上記は私が皆さんのためにまとめたものであり、将来的に皆さんのお役に立てば幸いです。

関連記事:

JavaScriptクロージャの理解と使用

JavaScriptタイミングイベントの理解と使用

JavaScriptポップアップイベントに関する知識

以上がJavaScript クライアント イベント ドライバーの詳細な解釈 (グラフィック チュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。