序文
フロントエンド開発では、イベントに関連する操作は非常に一般的な操作であり、特に実際のビジネス シナリオにおける複雑な相互作用を伴う要件です。JS には一般的に使用されるイベントが多数あり、さまざまなメソッドやタイプのクリック イベントが含まれます。一般に、イベントは関数と組み合わせて使用されます。そのため、イベントと関数は分離されておらず、関数の実行は起こる出来事。コモンイベントの使用については、この記事で詳しく共有し、後で参照できるように記録します。
JSのイベントとは何ですか?
JS では、イベントとは実際には、特定のトランザクションにおける特定の動作、つまり Web ページ要素に対する何らかの操作動作によってユーザーによって実行される操作を指します。イベントは、ドキュメントまたはブラウザ ウィンドウで発生する特定の対話型操作の瞬間です。これは、ユーザーまたはブラウザ自体によって実行されるアクションであり、JS と DOM 間の対話のブリッジです。たとえば、クリック、ロード、マウスオーバーなどです。すべてのイベントの名前です。イベントは通常、発生するイベントを通じて関数の実行を駆動するために、関数と組み合わせて使用されます。
注: JS では、イベント名は大文字と小文字が区別されます。イベントリスニングメソッドの場合は、イベント名の前に「on」を付ける必要があります。
イベントの3つの要素
イベントの 3 つの要素は、イベントのソース、イベント自体、およびイベント ドライバーを指します。
1. イベント ソース: div タグ、ボタン タグなど、イベントをトリガーする要素を指します。
2. イベント自体: イベントとは、クリック、ダブルクリック、スライドなど、インタラクション中に実行されるアクションを指します。
3. イベント ドライバー: イベント ハンドラーとも呼ばれます。つまり、実行後の結果。たとえば、ボタン ラベルをクリックすることによって実行されるクリック イベント関数。
JSでのイベントの要約
JS には、一般的に使用される主なイベントとして、キーボード イベント、マウス イベント、タッチ イベント、フォーム イベント、トランジション イベント、アニメーション イベントの 6 種類があります。
1. キーボードイベント
キーボード イベントは主に、離す、押す、ファンクション キーが認識されないという 3 つの状態のトリガーに分類されます。具体的には次のようになります。
| キーボードイベント |
発動条件 |
| オンキーアップ |
キーボードのキーが放されたときにトリガーされます |
| オンキーダウン |
キーボードのキーが押されたときにトリガーされます |
| キーを押すと |
キーボードのキーが押されて、Ctrl などのファンクション キーが認識されないときにトリガーされます。 |
例として、キーボードを離したときにトリガーし、「Hello!」を出力する場合の具体的なコードは次のとおりです。
window.onkeyup = function() {
console.log('Hello!')
}
2. マウスイベント
マウスイベントは主に、左ボタン、右ボタン、ダブルクリック、通過、離れる、フォーカスの獲得、フォーカスの喪失、移動、ポップアップ、および押下という 10 個の状態のトリガーに分類されます。具体的には次のようになります。
| マウスイベント |
発動条件 |
| クリック時 |
マウスの左ボタンをクリックするとトリガーされます |
| コンテキストメニュー |
マウスを右クリックするとトリガーされます |
| オンドブルクリック |
マウスがダブルクリックされるとトリガーされます |
| マウスオーバーで |
マウスオーバー時にトリガーされます |
| オンマウスアウト |
マウスが離れると発生します |
| オンフォーカス |
マウスフォーカスが取得されたときにトリガーされます |
| オンブラー |
マウスのフォーカスが失われたときにトリガーされます |
| マウス移動時 |
マウスが動くとトリガーされる |
| マウスアップ |
マウスが上がったときにトリガーされます |
| オンマウスダウン |
マウスが押されたときにトリガーされます |
使用例、マウスが左ボタンをクリックしたときにトリガーし、btn ボタンにクリックイベントを追加し、クリックして Hello! を出力します。具体的なコードは次のとおりです。
let button = document.querySelector('button')
button.onclick = function() {
console.log('Hello!')
}
3. タッチイベント
タッチイベントは主に、タッチ、スライド、遠ざけるという 3 つの状態のトリガーに分類されます。具体的には次のようになります。
| タッチイベント |
説明する |
| タッチスタート |
指が DOM 要素に触れるとトリガーされます |
| タッチムーブ |
指が DOM 要素上をスライドするとトリガーされます |
| タッチエンド |
指が DOM 要素から離れると発生します |
例を使用すると、タッチ イベントがトリガーされ、指がボックスに触れたときにトリガーされます。具体的なコードは次のとおりです。
let title = document.querySelector('div')
title.touchstart = function() {
console.log('touch')
}
4. フォームイベント
フォーム イベントは主に、フォーカスの取得、フォーカスの喪失、入力、変更、選択、リセット、送信の 7 つの状態のトリガーに分かれています。具体的には次のようになります。
| フォームイベント |
発動条件 |
| オンフォーカス |
フォームがフォーカスを取得したときに発生します |
| オンブラー |
フォームがフォーカスを失ったときにトリガーされます |
| 入力時 |
フォームに入力されるたびにトリガーされます |
| 変更中 |
フォームのコンテンツが変更されたときにトリガーされます |
| 選択時 |
フォームテキストが選択されたときにトリガーされます |
| リセット時 |
フォームがリセットされるとトリガーされます |
| 送信時 |
フォームが送信されるとトリガーされます |
例として、フォームへの入力が毎回行われるとトリガーされ、フォームに入力された内容が毎回印刷される具体的なコードは次のとおりです。
let input = document.querySelector('input')
input.oninput = function() {
console.log(this.value); //value就是输入的内容
}
5. 移行イベント
遷移が完了すると、遷移イベントが発生します。具体的には次のようになります。
| 移行イベント |
発動条件 |
| 移行中 |
移行が完了すると起動します |
6. アニメーションイベント
アニメーション イベントは主に、終了、繰り返し、再生の 3 つの状態のトリガーに分類されます。具体的には次のようになります。
| アニメーションイベント |
発動条件 |
| アニメーション終了 |
アニメーションの再生が終了するとトリガーされます |
| アニメーションの反復 |
アニメーションが繰り返されるときにトリガーされます |
| アニメーションスタート |
アニメーションの再生開始時にトリガーされます |
イベントオブジェクト
JS のイベント オブジェクトには主に、イベント オブジェクト、マウス イベント オブジェクト、キーボード イベント オブジェクトが含まれます。
1. イベントオブジェクト
イベント オブジェクトは主に、オブジェクト、タイプ、メソッド、バブリング防止の 4 つの部分で構成されます。具体的には次のようになります。
| イベントオブジェクトのプロパティメソッド |
説明する |
| e.ターゲット |
トリガーイベントを返すオブジェクトを参照します。 |
| e.タイプ |
クリック、マウスオーバー、オンなしなど、返されるイベントのタイプを指します。 |
| e.preventDefault() |
ページ上の左ボタンを禁止するなど、デフォルトイベントを防止する方法を指します。 |
| e.stopPropagation() |
イベントのバブリングを防ぐ方法を指します。 |
例を使用すると、ボタンをクリックすると、イベントをトリガーするオブジェクトが出力されます。具体的なコードは次のとおりです。
let button = document.querySelector('button')
button.onclick = function(e) {
console.log(e.target); //触发事件的对象
}
2. マウスイベントオブジェクト
マウス イベント オブジェクトは主に、ブラウザ x 座標、ブラウザ y 座標、ドキュメント x 座標、ドキュメント y 座標、スクリーン x 座標、スクリーン y 座標の 6 つの部分で構成されます。具体的には次のようになります。
| マウスイベントオブジェクト |
説明する |
| e.clientX |
ブラウザウィンドウの表示領域に対するマウスのX座標を返すことを指します。 |
| e.clientX |
ブラウザウィンドウの表示領域に対するマウスのY座標を返すことを指します。 |
| e.pageX |
ドキュメントページを基準としたマウスのX座標を返すことを指します。 |
| e.pageY |
ドキュメントページを基準としたマウスの Y 座標を返すことを指します。 |
| e.screenX |
コンピュータ画面を基準としたマウスの X 座標を返すことを指します。 |
| e.スクリーンY |
コンピュータ画面を基準としたマウスの Y 座標を返すことを指します。 |
3. キーボードイベントオブジェクト
キーボード イベント オブジェクトは主に、ユーザーが押した物理キーの値を返すことを指します。具体的には次のようになります。
| キーボードイベントオブジェクト |
説明する |
| e.キー |
ユーザーが押した物理キーの値を返します。 |
例として、ページ上で S キーを押すと、押された物理キーの値が出力されます。具体的なコードは次のとおりです。
window.addEventListener('keyup', function(e) {
console.log(e.key);
})
やっと
この記事では、フロントエンド開発 JS の一般的なイベントの詳細な紹介を通じて、実際のフロントエンド開発作業とフロントエンドの面接の両方において非常に重要な知識ポイントとなるため、フロントエンド開発者として、特にフロントエンド開発に短期間従事した開発者にとっては、関連する内容をマスターする必要があり、読む価値のある記事であり、その重要性については繰り返しません。注意を払い、コミュニケーションを取り、一緒に進歩することを歓迎します。