ホームページ > 記事 > ウェブフロントエンド > イベント バブリングとイベント委任に関する jquery のヒント、およびイベント bubbling_jquery を防止および許可する 3 つの実装方法
イベント バブリングとイベント委任に関する jquery のヒント、およびイベント bubbling_jquery を防止および許可する 3 つの実装方法
- WBOYオリジナル
- 2016-05-16 15:29:201620ブラウズ
まず、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');
})
私はここでそれを考えました。.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() の例であり、次のように書き換えることができます。
$('body').on('click','#btn',function(e){
alert(‘btn');
})
jqueryのバブリングイベントのブロックと許可（3つの実装方法）
バブリングやデフォルトのイベントは、特定の時点では必要ありません。ここでは、バブリングやデフォルトのイベントを防ぐための 3 つの方法を紹介します。興味のある人は、それについて理解するのに役立ちます。賑やかなイベント
バブリング イベントやデフォルト イベントの発生を望まない場合があるため、バブリング イベントやデフォルト イベントを防ぐためにいくつかの jquery メソッドが必要です。次の 3 つの方法で、さまざまなレベルのブロックを実現できます。
A: return false --->イベント ハンドラーで、デフォルトの動作とイベントのバブリングを防ぎます。
return false イベント処理では、デフォルトイベントやバブリングイベントを防ぐことができます。
B:event.preventDefault()---> イベント ハンドラーで、デフォルト イベントを防止します (バブリングを許可します)。
event.preventDefault() はデフォルトのイベントを防止できますが、イベント処理中にバブリング イベントが発生することを許可します。
C:event.stopPropagation()---> イベント ハンドラーでバブリングを防止します (デフォルトの動作を許可します)。
event.stopPropagation() はバブリングを防止できますが、イベント処理中にデフォルトのイベントが発生することを許可します。