JQ および JS でのイベント メカニズムとブロック

JQuery のイベント バインディングはすべてイベント バブリングです。この記事では、JQ と JS におけるイベントのメカニズムとその防止について説明します。

JQuery でイベント処理関数をバインドするいくつかの方法では、イベント タイプ (イベント バブリングまたはイベント キャプチャ) を渡すことができません。例:

.on(events [, selector ] [, data ], handler)

パラメータ
events - 文字列タイプ スペースとオプションの名前空間で区切られた 1 つ以上のイベント タイプ (「click」、「focus click」、「keydown.myPlugin」など)。
eventsMap - オブジェクト タイプは Object オブジェクトで、その各属性はイベント タイプとオプションの名前空間 (パラメーター イベント) に対応し、属性値はバインドされたイベント処理関数 (パラメーター ハンドラー) に対応します。
selector - オプション/文字列型 どの子孫要素がバインドされたイベントをトリガーできるかを指定するために使用される jQuery セレクター。このパラメーターが null または省略された場合、現在の要素自体がイベントにバインドされていることを意味します (イベント ストリームが現在の要素に到達できる限り、実際のトリガーは子孫要素である場合もあります)。
data - イベントがトリガーされたときに、event.data を通じてイベント処理関数に渡す必要がある任意のタイプのデータ。
handler - 関数タイプで指定されたイベント ハンドラー関数。ネイティブ JavaScript によって提供される

addEventListener() を使用すると、イベントのタイプを設定できます

element.addEventListener(event, function, useCapture)

パラメータ
event - 必須。イベント名を指定する文字列。

注: 「on」接頭語は使用しないでください。 たとえば、「onclick」の代わりに「click」を使用します。

機能 - 必須。イベントがトリガーされたときに実行される関数を指定します。

イベントオブジェクトが最初のパラメータとして関数に渡されるとき。 イベント オブジェクトのタイプは、特定のイベントによって異なります。たとえば、「クリック」イベントは MouseEvent オブジェクトに属します。
useCapture - オプション。イベントがキャプチャフェーズで実行されるかバブリングフェーズで実行されるかを指定するブール値。

可能な値:
true - イベントハンドラーはキャプチャフェーズ中に実行されます。
false- false- デフォルト。イベント ハンドラーはバブリング フェーズ中に実行されます。

イベントの伝播を防ぐ 2 つの方法

方法 1: イベント オブジェクトの stopPropagation() 関数を使用するこのアプローチは JavaScript と一致します。

$("#outC").click(function(event){  
    event.stopPropagation();  
});

方法2: イベント処理関数の戻り値がfalseになる JavaScriptのaddEventListenerにはこの関数がありません。

$("#outC").click(function(event){  
    return false;  
});

权 著作権表示: この記事は最初に私の個人ステーション Keyon Y で発行されたものです。出典を示してください。

JQuery のイベント バインディングはすべてイベント バブリングです。

JQuery でイベント処理関数をバインドするいくつかの方法では、イベント タイプ (イベント バブリングまたはイベント キャプチャ) を渡すことができません。例:

.on(events [, selector ] [, data ], handler)

パラメータ

events - 文字列タイプ スペースとオプションの名前空間で区切られた 1 つ以上のイベント タイプ (「click」、「focus click」、「keydown.myPlugin」など)。
eventsMap - オブジェクト タイプは Object オブジェクトで、その各属性はイベント タイプとオプションの名前空間 (パラメーター イベント) に対応し、属性値はバインドされたイベント処理関数 (パラメーター ハンドラー) に対応します。
selector - オプション/文字列型 どの子孫要素がバインドされたイベントをトリガーできるかを指定するために使用される jQuery セレクター。このパラメーターが null または省略された場合、現在の要素自体がイベントにバインドされていることを意味します (イベント ストリームが現在の要素に到達できる限り、実際のトリガーは子孫要素である場合もあります)。
data - イベントがトリガーされたときに、event.data を通じてイベント処理関数に渡す必要がある任意のタイプのデータ。
handler - 関数タイプで指定されたイベント ハンドラー関数。ネイティブ JavaScript によって提供される

addEventListener() を使用すると、イベントのタイプを設定できます

element.addEventListener(event, function, useCapture)

パラメータ

event - 必須。イベント名を指定する文字列。

注: 「on」接頭語は使用しないでください。 たとえば、「onclick」の代わりに「click」を使用します。

機能 - 必須。イベントがトリガーされたときに実行される関数を指定します。

イベントオブジェクトが最初のパラメータとして関数に渡されるとき。 イベント オブジェクトのタイプは、特定のイベントによって異なります。たとえば、「クリック」イベントは MouseEvent オブジェクトに属します。

useCapture - オプション。イベントがキャプチャフェーズで実行されるかバブリングフェーズで実行されるかを指定するブール値。

可能な値:

true - イベントハンドラーはキャプチャフェーズ中に実行されます。
false- false- デフォルト。イベント ハンドラーはバブリング フェーズ中に実行されます。

イベントの伝播を防ぐ 2 つの方法

方法 1: イベント オブジェクトの stopPropagation() 関数を使用するこのアプローチは JavaScript と一致します。

$("#outC").click(function(event){  
    event.stopPropagation();  
});

方法2: イベント処理関数の戻り値がfalseになる JavaScriptのaddEventListenerにはこの関数がありません。

$("#outC").click(function(event){  
    return false;  
});

関連する推奨事項:

JavaScript イベントメカニズム

はじめてのJQuery(2)イベントの仕組み(1)_jquery

JavaScriptのイベントの仕組みを簡単に分析_基礎知識

以上がJQ および JS でのイベント メカニズムとブロックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。