ホームページ > 記事 > ウェブフロントエンド > JavaScript クライアント イベント ドライバーの詳細な解釈 (グラフィック チュートリアル)
ここで、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 クライアント イベント ドライバーの詳細な解釈 (グラフィック チュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。