イベントバブリングとイベント委任に関する jquery のヒント、およびイベント bubbling_jquery を防止および許可する 3 つの実装方法-jsチュートリアル-php.cn

イベントバブリングとイベント委任に関する jquery のヒント、およびイベント bubbling_jquery を防止および許可する 3 つの実装方法

WBOY

リリース： 2016-05-16 15:29:20

オリジナル

1663 人が閲覧しました

まず、jQuery イベントがトリガーされるとき、2 つのメカニズムがあることは誰もが知っています。1 つはイベント委任、もう 1 つはイベントバブリングです (IE の状況は当面考慮しません)。クリックイベントを例として、最初に次のコードを添付します:

html:

<body>
<div id="box">
<p id="btn">我是按钮</p>
</div>
</body>
style:
.hid{
　display:none;
}

ログイン後にコピー

スクリプト:

$('#box').click(function(){
 $(‘#btn').toggleClass(‘hid');
})
$('#btn').click(function(){
 alert('btn');
})

ログイン後にコピー

このコードの本来の目的は、#btn をクリックすると「btn」という文字列を警告し、#box をクリックすると #btn を非表示にすることです。 btn の場合、最初に btn イベントを実行し、次にボックスイベントを実行します。つまり、最初にアラートを実行し、次にそれを非表示にします。これは私たちが考えていたものと異なるので、この問題をどう解決するか? ここで、イベントのバブリングのメカニズムを考える必要があります。btn をクリックすると、イベントがドキュメントオブジェクトまで親要素にバブリングされるからです。

1.7 以降の JQuery バージョン (私の記憶が正しければ) は、バインドされた要素のイベントを処理するための .on() イベントを提供し、バブリングを防ぐために .on() イベントと stopPropagation() メソッドを使用できます。 🎜>

$('#box').on('click','#btn',function(e){
 e.stopPropagation()；
 alert(‘btn');
})
$('#box').click(function(){
 $(‘#btn').toggleClass(‘hid');
})

ログイン後にコピー

ここでは、最初に #btn イベントをバインドするために使用しました。これにより、btn ボタンがクリックされたときに、alert('btn') が実行されますが、e.stopPropagation() がイベントのバブリングを防止しているため、バブリングは行われません。 toggleClas イベントがトリガーされ、#box をクリックすると、通常の toggleClass イベントがトリガーされます。

私はここでそれを考えました。.on() が使用されていない場合にそれを解決する方法は、ネイティブ JS と同様に、クリックされたターゲットを監視するために addEventListener を使用します。コードは複雑ではありません。

$('#box‘).click(function(e) {
 if (e.target == this) {
  $(‘#btn').toggleClass(‘hid');
 }
})
$(‘#btn').click(function() {
 alert(‘btn');
})

ログイン後にコピー

このようにして、イベントの急増を防ぐことができます。

もちろん、イベントバブリングは副作用のすべてではありません。これは、これから説明する別のタイプです。イベント委任は、イベントバブリングに基づいています。 btn と #box の間には多くの要素があり、最も内側の #btn をクリックして、それに対応するイベントをトリガーしたい場合は、その周囲の要素をクリックして、そのクリックがターゲットであるかどうかを判断できます。 btn である場合、btn をトリガーするイベントは実際には上記の .on() の例であり、次のように書き換えることができます。

処理のために btn イベントをクリック本文に委任します。

$('body').on('click','#btn',function(e){
 alert(‘btn');
})

ログイン後にコピー

最後に、注意深く分析してみましょう。実際、イベント委任とイベントバブリングは、論理的な観点から見ると、実行の 2 つの反対方向にすぎません。イベント委任は実際にはイベントキャプチャのプロセスであり、イベントバブリングは内側から外側へバブリングするプロセスであるのに対し、イベントバブリングは外側から内側へキャプチャするプロセスとして見ることができます。

jqueryのバブリングイベントのブロックと許可（3つの実装方法）

バブリングやデフォルトのイベントは、特定の時点では必要ありません。ここでは、バブリングやデフォルトのイベントを防ぐための 3 つの方法を紹介します。興味のある人は、それについて理解するのに役立ちます。賑やかなイベント

バブリングイベントやデフォルトイベントの発生を望まない場合があるため、バブリングイベントやデフォルトイベントを防ぐためにいくつかの jquery メソッドが必要です。

次の 3 つの方法で、さまざまなレベルのブロックを実現できます。

A: return false --->イベントハンドラーで、デフォルトの動作とイベントのバブリングを防ぎます。

return false イベント処理では、デフォルトイベントやバブリングイベントを防ぐことができます。

B:event.preventDefault()---> イベントハンドラーで、デフォルトイベントを防止します (バブリングを許可します)。

event.preventDefault() はデフォルトのイベントを防止できますが、イベント処理中にバブリングイベントが発生することを許可します。

C:event.stopPropagation()---> イベントハンドラーでバブリングを防止します (デフォルトの動作を許可します)。

event.stopPropagation() はバブリングを防止できますが、イベント処理中にデフォルトのイベントが発生することを許可します。