Jqueryイベントバブル

4911 ワード

(1)何が事件の泡立ちですか
まず、1つのイベントが発生したとき、そのイベントには常にイベントソースがあります.つまり、このイベントを引き起こしたオブジェクトは、1つのイベントが空で発生することはできません.これがイベントの発生です.
事件が発生すると、この事件は伝播し始めます.なぜ伝播するのか.イベントソース自体にイベントを処理する能力がないからです.例えば、ボタンをクリックすると、clickイベントが発生しますが、このボタン自体はこのイベントを処理できません(くだらない話)、イベントはこのボタンから伝播して、このイベントを処理できるコードに到達しなければなりません(例えば、ボタンのonclickに関数の名前を付けて、この関数にボタンのclickイベントを処理させます).
イベントが伝播する過程で、それを処理できる関数が見つかったとき、私たちはこの関数がこのイベントを捉えたと言います.
ここまで言うと、肝心な問題が来ました.それは関数がどのようにしてイベントをキャプチャしたのかということです.これは事件の泡にかかわる.
泡の概念をよりよく理解するために、今あなたの前に水が置いてあることを想像することをお勧めしますが、この水は私たちが普段見ているのとは少し違います.それは数層に分けられ、各層は1つ以上の領域に分けられ、最上階は私たちがよく知っているウィンドウオブジェクト(windowオブジェクト)、次の層はいくつかの領域(documentオブジェクト、historyオブジェクトなど)に分けられています.一方、documentオブジェクトの次のレイヤは複数のサブオブジェクトに分かれています.
これらのオブジェクトの階層関係はDOMのオブジェクトツリーを構成する.
イベントの伝播には方向性があり、ボタンをクリックすると発生したイベントはこのボタンから上へ伝播します(カップの底から泡が上がっているように、これがイベントの泡と呼ばれる理由です).しかし、このイベントは常に特定の属性に値があるかどうかを探します.例えば、ボタンのclickイベントは、ボタンにonclick属性があるかどうかの意味のある定義(すなわち、その属性が存在する関数または実行可能な文を指す)を先に探し、ある場合は、この関数または文を実行します.その後、イベントは上へ伝播し続け、ボタンの上位オブジェクト(formオブジェクトやdocumentオブジェクト、つまりボタンを含む親オブジェクトなど)に到達し、オブジェクトがonclickプロパティも定義されている場合、プロパティの値を実行します.
したがって、このボタンの上に3つのレイヤ(form、document、window)があり、この3つのレイヤがonclickプロパティを定義している場合、ボタンのclickイベントが発生すると、4つの(ボタン自体を含む)関数が呼び出されたり、4つの文が実行されたりします.
イベントのこれらの特性は、レベル0 domでも適用されます.
(2)jquery阻止イベント発泡例
1.falseを返すことでデフォルトの動作をキャンセルし、イベントのバブルを阻止します.
jQueryコード:

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

、preventDefault()メソッドを使用してデフォルトの動作のみをキャンセルします.
jQueryコード:

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

、stopPropagation()メソッドを使用することによって1つのイベントのみの発泡を阻止する.
jQueryコード:

$("form").bind(
　　"submit", 
　　function(event){
　　　　event.stopPropagation();
　　}
);

(3)jsイベント発泡の検証について
今日のこの問題は主にいくつかのキーワードに関連している:オブジェクト、トリガイベント、キャプチャイベント、実行処理、バブル.これは実はjs全体が実行するプロセスです.中には泡が出るという過程が面白い.実は1杯の水のようですが、この水は階層的で、一番下は現在トリガーされているイベントの対象です.そして上の範囲が大きいほど、最上階はwindowに違いなく、最後から2番目の層はdocumentです.バブルは、フローティング中に現在到達しているレイヤにバインドされたイベント処理方法があるかどうかを判断します.話があれば相応の処理を実行する.ないと泡が立ち続けます.最上位のwindowウィンドウレイヤに到達するまで.イベントの発泡を阻止するために、任意の層で対応する処理を行うことができます.方法は、イベントオブジェクトのバブルを阻止する方法です.event.stopPropagation();次はjsイベントの発泡を検証するプロセス方法を書きます.

<script type="text/javascript">
    $(document).ready(function(){
        $('.one').click(function(e){
            alert('one');
        });

        $('.two').click(function(e){
            alert('two');
        });

        $('.three').click(function(e){
            alert('three');
           //           
           //e.stopPropagation();
        });
    });
</script>
<div class="one" style="width:200px;height:200px;background:green;">
one
    <div class="two" style="width:150px;height:150px;background:yellow;">
    two
        <div class="three">
            three
        </div>
    </div>
</div>

(4)まとめ
1.イベントバブル対応トリガは上位レベルの同じイベント特殊です.twoがダブルクリックイベントに設定されている場合、twoをクリックするとoneクリックイベントがバブルトリガされます(ダブルクリックにはクリックが含まれます).
2.clickイベントで、処理するイベントの前にe.preventDefault()を追加する場合.では、動作をキャンセルし(一般的にはreturn操作をしたことに相当)、後の文を実行しません.
3.e.stopPropagation()clickイベント内であれば、上位clickイベントはトリガーされません.
jsの書き方:
1)泡立ち止めの書き方

//         ，      IE   
if ( e && e.stopPropagation )
　　//      W3C stopPropagation()  
　　e.stopPropagation();
else
　　//  ，      IE          
　　window.event.cancelBubble = true;
return false;

)ブラウザのデフォルト動作をブロック

//         ，      IE   
if ( e && e.preventDefault )
　　 //         (W3C)
　　e.preventDefault();
else

jqueryの書き方:
1)return false :In event handler ,prevents default behavior and event bubbing . return falseはイベントの処理で、デフォルトのイベントとバブルイベントを阻止することができます.
2)event.preventDefault():In event handler ,prevent default event (allows bubbling) . event.preventDefault()イベントの処理では、デフォルトのイベントはブロックできますが、バブルイベントの発生は許可されます.
3)event.stopPropagation():In event handler ,prevent bubbling (allows default behavior). event.stopPropagation()イベントの処理では、バブルを阻止できますが、デフォルトのイベントの発生を許可します.
prototypeの書き方:
Event.stop(event)
使用方法:
イベントが発生すると、ブラウザは通常、イベント発生要素のイベントハンドラを最初にトリガーし、次にその親要素、親要素の親要素......ドキュメントのルート要素までトリガーします.これはイベントバブルと呼ばれ、イベント伝播の最も一般的な方法である.イベントを処理した後、イベントの伝播を停止し、泡が立ち続けることを望んでいない可能性があります.プログラムがイベントを処理する機会がある場合、このイベントにデフォルトの動作がある場合、ブラウザもそれを処理します.たとえば、ナビゲーションリンクをクリックしたり、フォームをサーバにコミットしたり、1つの単行テキストボックスでリターンキーを押したりします.これらのイベントに対して独自の処理方法を定義した場合、関連するデフォルトの動作を阻止したい場合があります.
ソース:
原文リンク一:http://blog.163.com/chtx87_98/blog/static/654011192011830928585/
原文リンク2:http://hi.baidu.com/armyknife/blog/item/60ddc6c378b00847b219a81b.html

STM 32学習ノート9——stm 32 L 072 SDカードプログラム移植記録

JAvascriptボタンにリターンイベントを登録する(デフォルトボタンを設定する)方法