注意事項イベントバブリングを忘れてはいけないとき、アセンブリのパッケージをポップに行く、結果はピットではなかったではありません。自分の問題を解決するために、多くの情報にアクセスするために行く、イベントの流れに関連した知識は、要約を与えました。
イベントバブリング：シンプルですが、私の知識無数の背中のピット！
JavaScriptとHTMLのイベントによって達成インタラクティブ。イベントストリームブラウザは非常に重要な概念です。論争をバブリングこれらの古代のブラウザイベントキャプチャとイベントを議論しないでください、唯一のイベントは三つの部分、イベントのキャプチャ段階、ターゲット段階では、位相をバブリングイベントが含まれてDOM2ストリームに指定されたかを知る必要があります。
まず、イベントのキャプチャ
イベントのキャプチャ、開始から文書要素は、親要素の早くより多くの先輩がイベントを受け取るので、これはトップダウンからプロセスです。
ここでも、あなたが本当に知識ポイントを把握していないことがあり、実用化にピット段ません。そのため、一般的なイベントのキャプチャ・ピットそれは何ですか？
1.ピット：新たに挿入されたサブ要素は、クリックイベントをバインドしません。
多くの学生は、JS初心者の時に、このようなピットに出会うことがあります。初期状態ではul要素が4つのli要素を持っている、我々はli要素にサイクルがクリックイベントを追加することができ、我々はアクションを実行します。この例では、我々はクリックイベントがバインドされていないことをピット、李新しく追加された要素のことです。
<ul class="container">
<!-- 先循环给原有的4个li绑定click事件 -->
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<!-- 这是新添加的li元素，但是该元素没绑定click事件 -->
<li class="item new"></li>
</ul>はい、それは、このようなピットで、この問題を解決するために、我々は、イベントのキャプチャの原理を使用します。
$('ul.container').click(function(event) {
var target = event.target;
if (target.className == 'item') {
// dosomething
}
})上記の解決策では、私は李はイベントに、しかし、イベントを結合すべての親のUL李に直接接続しないでください。原則としてイベントのキャプチャによると、イベントはLiにトップダウンパスになり、私達はちょうど私たちはいくつかの簡単な条件によって要素、上記の例中のLiのclassNameの判決を標的にすることができることを確認する必要があります。
この方法では、有名なイベントのデリゲートです。
イベントの代表団は、実際には非常に重要なポイントであると知識が頻繁に使用されます。
2.ピット2：ターゲット要素が子要素を持っている場合は、どのように行うの？
私たちが使用クラス名でターゲット要素を決定すると、このような状況に遭遇しました。
...
<li class="item">
<div class="title">xxx</title>
<p class="desc">xxxxxxs</p>
</li>
...我々は、使用クラス名の裁判官は、ターゲットevent.target要素が子要素li.itemで実際に、この時間は正確にバインドするイベントに方法がないことがわかった時に、すべての李に要素を追加したいイベントの委任を使用しようとするとどのように我々は、この時間を行う必要があり、上の李？
このケースは、私たちがしなければならない、それが転送イベントのキャプチャを停止することで、その後、どのようにそれを防ぐには？
私は、次のCSSプロパティを追加することができます李のすべての子供たちに、CSSを使用する方法を知っています
li.item > * {
pointer-events: none;
}論理的には、jsの方法があるはずですが、調査の記事の多くは言及し、それがサプリメントに来たときにそのため、一時的にそう、それをすることはありません。
jqueryのでは、イベントは、私たちは手数料を達成するために役立っている、と助けてくれは、これらのピットを取り除きます。次のように言葉を選んだ、私たちは、特定の構文に従う必要がありますが、我々は我々がli.item結合事象のすべての要素を与えなければならないなどの独自の判断を行うための条件を、持っていません
// on中的第二参数就是我们的目标元素的选择器
$('ul.container').on('click', 'li.item', function(event) {
// dosomething
})第二に、イベントバブリング
イベントを撮影した、このイベントがピットを泡立てると言われています。いわゆるイベントバブリングは、目標は、これはボトムアッププロセスであり、イベントのDOMツリー内の最初の要素の底が、その後渡さ、受信されていることを確認することです。
私たちはしばしば、1つのポップスタイルを体験真ん中のコンテンツは、その後、半透明のマスクの層がポップ面積は別にページのコンテンツになりますがあるだろう時に飛び出します。一部のコンテンツには、このような確認や取り消しなど、ボタンのクリックイベントのバインドをポップアップ表示されます。半透明のマスクでは、あなたもクリックしたときに、隠されたポップアップ表示されます、クリックイベントを結合することができます。経験の私の不足が、提供されたマスク層がポップボタンの親になった場合は、トラブルイベントバブリングをもたらすでしょう。
つまり、次の例では、コンテナは、フルスクリーンマスク、ボタンのクリックボタン内部ポップです。彼らはイベントをクリックしてバインドされ、同時に、異なるアクションを実行します。私は、ボタンをクリックしたときしかし、実際の実行では、その後、ボタンのクリックイベントとコンテナは、ボトムアップの実行順序、実行されます
<div className="container">
<div className="button">click</div>
</div>私たちはピットを感じ始めることができ、この事のために小さな例を書きました。ポップが生成されます、空白をクリックします
http：//yangbo5207.github.io/s ...
この問題を解決するためにすべての権利の方法は、単純にイベントをバブリング防ぐためです。
$xxx.click(function(e) {
e.stopPropagation();
// ie
e.cancelBubble = true;
})イベントの全体の流れを理解し、我々は転写プロセスとDOMのイベントの方向性を感じることができる、そして知識が単純なポイントですが、私たちの問題やピットのすべての種類を解決するために彼を使用しますが、それは無視することは非常に簡単です、それはあなたをお勧めしますしっかりと把握する機会を探してください。
そして、そこピットであり、我々はほとんどのイベントイベントバブリングの特定の種類をサポートしていない性質上、このピットは、実際に遭遇することはできません！
ぼかし：要素がフォーカストリガを失うと、イベントはバブリングサポートされていない
フォーカスを：要素がフォーカスを取得したときに火災が、イベントがバブルサポートしていない
要素の上にマウスを移動するには、イベントがバブリングサポートされていない場合に火災：MouseEnterイベントを
mouseleaveを：マウスが移動したとき要素がトリガされたときに、イベントがバブルをサポートしていません
... ...
そして、IE6、IE7、IE8の変更で、提出し、選択し、リセットイベントには、参照仕様の定義は、イベントのバブリングを発生しないという事実です。
あなたはこれらのイベントの結合、バブリングを必要としている、とあなただけサポートしていない本質的にバブリングイベントがまだあるかわからない場合は、あなたは悲劇におそらくあります。 - - だから、この時点での長い私はちょうど私が、このようなピットが発生したことを覚えていますが、一時的にシナリオを思い出すことができない、のようなヘッド内部に印象がある限り！
私はああポイント紹介やコレクションについては非常に完全な、総括価値が考慮されるべきで来てほしい、そんなにイベントフローのピットに会った、知っています！
