ホームページ > ウェブフロントエンド > jsチュートリアル > JSバブリングイベントとは何ですか?

JSバブリングイベントとは何ですか?

百草
リリース: 2023-11-01 14:41:29
オリジナル
975 人が閲覧しました

js のバブリング イベントには、クリック、dblclick、mouseover、mouseout、mousemove、mousedown、mouseup、keydown、keyup、input、change、submit、focus、blur、scroll などが含まれます。詳細な紹介: 1. ユーザーがマウス ボタンをクリックするとトリガーされるクリック イベント。クリック イベントはターゲット要素でトリガーされ、親要素でバブルアップします。2. dblclick など。

JSバブリングイベントとは何ですか?

このチュートリアルのオペレーティング システム: Windows 10 システム、DELL G3 コンピューター。

JavaScript には一般的なバブリング イベントが多数あり、これらのイベントは、イベントがトリガーされた後、ターゲット要素から親要素までバブリングする過程で順次トリガーされます。一般的なバブリング イベントは次のとおりです:

1. クリック イベント: ユーザーがマウス ボタン (左ボタン、中央ボタン、または右ボタン) をクリックするとトリガーされます。クリック イベントはターゲット要素で発生し、親要素でバブルアップします。

2. dblclick イベント: ユーザーがマウス ボタン (左ボタン、中ボタン、または右ボタン) をダブルクリックするとトリガーされます。 dblclick イベントはターゲット要素で発生し、親要素でバブルアップします。

3. マウスオーバー イベント: マウス ポインターがターゲット要素に入るとトリガーされます。マウスオーバー イベントはターゲット要素で発生し、親要素でバブルアップします。

4. Mouseout イベント: マウス ポインターがターゲット要素から離れるとトリガーされます。 Mouseout イベントはターゲット要素で発生し、親要素でバブルアップします。

5. Mousemove イベント: マウス ポインターがターゲット要素上を移動するとトリガーされます。 Mousemove イベントはターゲット要素で発生し、親要素でバブルアップします。

6. マウスダウン イベント: マウス ボタンが押されたときにトリガーされます。 Mousedown イベントはターゲット要素で発生し、親要素でバブルアップします。

7. マウスアップ イベント: マウス ボタンが放されたときにトリガーされます。 Mouseup イベントはターゲット要素で発生し、親要素でバブルアップします。

8. keydown イベント: キーボードのキーが押されたときにトリガーされます。 keydown イベントはターゲット要素で発生し、親要素でバブルアップします。

9. keyup イベント: キーボードのキーが放されたときにトリガーされます。 keyup イベントはターゲット要素で発生し、親要素でバブルアップします。

10. 入力イベント: ターゲット要素の値が変更されたときにトリガーされます。入力イベントはターゲット要素で発生し、親要素でバブルアップします。

11. Change イベント: ターゲット要素の値が変更されてフォーカスを失ったときにトリガーされます。 Change イベントはターゲット要素で発生し、親要素でバブルアップします。

12. submit イベント: フォームが送信されるとトリガーされます。 submit イベントはターゲット要素で発生し、親要素でバブルアップします。

13. focus イベント: ターゲット要素がフォーカスを取得するとトリガーされます。 focus イベントはターゲット要素で発生し、親要素でバブルアップします。

14. Blur イベント: ターゲット要素がフォーカスを失ったときにトリガーされます。 Blur イベントはターゲット要素で発生し、親要素でバブルします。

15. スクロール イベント: ターゲット要素のスクロール バーがスクロールするとトリガーされます。スクロール イベントはターゲット要素で発生し、親要素でバブルアップします。

これらはバブリング イベントの一般的な例の一部にすぎません。実際には、ターゲット要素で発生し、親要素でバブルする他のイベントも多数あります。 JavaScript コードを記述する場合、これらのバブリング イベントを理解すると、イベント伝播のプロセスをより深く理解し、処理するのに役立ちます。

以上がJSバブリングイベントとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート