ホームページ > 記事 > ウェブフロントエンド > JavaScript クライアント イベント ドライバーの詳細な解釈 (グラフィック チュートリアル)
JavaScript クライアント イベント ドライバーの詳細な解釈 (グラフィック チュートリアル)
- 亚连オリジナル
- 2018-05-21 10:14:231316ブラウズ
ここで、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 サイトの他の関連記事を参照してください。