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

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

亚连

リリース： 2018-05-21 10:14:23

オリジナル

1250 人が閲覧しました

ここで、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>

ログイン後にコピー

効果は次のとおりです: