イベントバブリングとは何ですか? jquery_jquery でイベントバブリングを防ぐ方法

(1) イベントバブリングとは
まず、イベントが発生するとき、そのイベントには必ずイベントソース、つまりイベントをトリガーしたオブジェクトがあることを理解する必要があります。何もないところから生み出すことはできません。これがイベントの発生です。

出来事が起こると、その出来事は広がり始めます。なぜそれを広めるのでしょうか？イベント ソース自体にはイベントを処理する機能がないためです。たとえば、ボタンをクリックするとクリック イベントが生成されますが、ボタン自体はこのイベントを処理できません (ナンセンスです)。イベントを処理できるコードに到達するには、イベントをボタンから伝播する必要があります。ボタンに onclick を与える この属性には関数の名前が割り当てられます。これにより、この関数がボタンのクリック イベントを処理します)。

イベントが伝播中にそれを処理できる関数を見つけた場合、この関数がイベントをキャプチャしたと言います。

そう言えば、重要な疑問が生じます。つまり、関数はどのようにしてイベントをキャプチャするのでしょうか?これにはイベントのバブリングが含まれます。

泡立ちの概念をよりよく理解するために、目の前に水の入ったコップがあると想像してみてください。このコップの水は、私たちが通常見ているものとは少し異なります。 1 つのレイヤーは 1 つまたは複数のエリアに分割され、最上位はよく知られたウィンドウ オブジェクト (ウィンドウ オブジェクト) で、次のレイヤーは複数のエリア (ドキュメント オブジェクト、履歴オブジェクトなど) に分割されます。ドキュメント オブジェクトの次のレイヤーは複数のサブオブジェクトに分割されます。

これらのオブジェクトの階層関係は、DOM 内のオブジェクト ツリーを構成します。
イベントの伝播には方向性があります。ボタンがクリックされると、生成されたイベントはボタンから上に伝播し始めます (ちょうどカップの底から上昇する泡のように、これがイベント バブリングと呼ばれる理由です)。このイベントは、特定のプロパティに値があるかどうかを常に検索します。たとえば、ボタンのクリック イベントでは、まずボタンに onclick 属性の意味のある定義があるかどうかが検索されます (つまり、属性が既存の関数または実行可能ステートメントを指している場合)。定義されている場合は、その関数またはステートメントを実行します。 ; 次に、オブジェクトが onclick も定義している場合、イベントは上方向に伝播し、ボタンの上位レベルのオブジェクト (フォーム オブジェクトやドキュメント オブジェクトなど、つまりボタンの親オブジェクトが含まれます) に到達します。属性の場合、属性の値が実行されます。

つまり、このボタンに 3 つのレイヤー (フォーム、ドキュメント、ウィンドウ) があり、これら 3 つのレイヤーすべてが onclick 属性を定義している場合、ボタンのクリック イベントが生成されると、4 (ボタンを含む)それ自体) 関数を実行するか、4 つのステートメントを実行します。
イベントのこれらの特性は、レベル 0 DOM にも当てはまります。

(2) イベントのバブリングを防止する jquery の例
1. false を返すことでデフォルトの動作をキャンセルし、イベントのバブリングを防止します。
jQuery コード:

コードをコピー コードは次のとおりです:

$(" form") .bind(
"submit",
function() {
return false;
}
);

2.PreventDefault( ) メソッドのみ デフォルトの動作をキャンセルします。
jQuery コード:

コードをコピー コードは次のとおりです:

$(" form") .bind(
"送信",
function(event){
event.preventDefault();
}
);

3. stopPropagation() メソッドを使用すると、イベントのバブリングが防止されるだけです。
jQuery コード:

コードをコピー コードは次のとおりです:

$("フォーム") .bind(
"送信",
function(event){
event.stopPropagation();
}
);

(3 ) jsイベントバブリングの検証
今日の質問は主にオブジェクト、トリガーイベント、キャプチャイベント、実行処理、バブリングというキーワードがいくつかあります。これは実際には js の実行プロセス全体です。泡立つ過程がとても面白いです。実際には、これはコップ一杯の水のようなものですが、このコップ一杯の水は層になっており、一番下が現在イベントをトリガーしているオブジェクトです。そして、上に行くにつれてスコープは大きくなり、最上位のレイヤーは間違いなくウィンドウ、最後から 2 番目のレイヤーはドキュメントになります。フローティング プロセス中に、バブルは現在到達しているレイヤーにバインドされたイベント処理メソッドがあるかどうかを判断します。必要に応じて、それに応じた処理が行われます。そうでない場合は、泡立てを続けます。最上位のウィンドウ層に到達するまで。イベントがバブルし続けるのを防ぐために、任意のレイヤーで対応する処理を実行できます。バブリングを防ぐためにイベントオブジェクトのメソッドを呼び出す方法です。 event.stopPropagation(); 以下は、js イベントのバブリングを検証するために記述された処理メソッドです。

コードをコピー コードは次のとおりです:

1 つ

2



3

>
(4) まとめ

1. イベントバブリングは、上位層で同じイベントをトリガーすることに対応します
特殊: ダブルクリックイベントに 2 つが設定されている場合、2 つをクリックすると、バブルし、ワンクリック イベント
をトリガーします (ダブルクリックにはクリックが含まれます)。

2. click イベント内で、処理したいイベントの前に e.preventDefault();
を追加すると、ステートメントが実行されなくなった後、動作がキャンセルされます (一般的な理解: return 操作と同等)。 。 3.e.stopPropagation() は、クリック イベント内にある限り、上位レベルのクリック イベントをトリガーしません。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。