JS,Jqueryにおけるイベントの発泡及びイベントの発泡を阻止する方法

2497 ワード

イベントバブルとは
オブジェクト上でonclickイベントなどのイベントをトリガーします.このイベントのハンドラが定義されている場合、このイベントはこのハンドラを呼び出します.このイベントハンドラが定義されていない場合、またはイベントがtrueに戻る場合、このイベントはこのオブジェクトの親オブジェクトに伝播し、内側から外側に伝播します.処理されるまで(親オブジェクトのすべての同類イベントがアクティブになる)、またはオブジェクト階層の最上位レベル、すなわちdocumentオブジェクト(一部のブラウザはwindow)に到達します.
事件の泡立ちを知った後、JSとJqueryの角度から事件の泡立ちを見に行きました.
HTMLページ:

<body>
    <div class="d1" >
        <div class="d2" ></div>
    </div>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
    <script type="text/javascript">
    	$(".d2").click(function(){
    	    alert(111);
    	});
    	
    	$(".d1").click(function(){
    	    alert(222);
    	});
    </script>
</body>

CSS:

.d1{background-color: red;width: 500px;height: 500px;}
.d2{background-color: green;width: 200px;height: 200px;}

以上のコードを実行すると、d 2のdivレイヤをクリックすると、ポップアップ111および222が表示される.これが事件の泡だ.では、私たちはどのようにしてこのような事件の泡を阻止しますか?
JSではIEと非IEブラウザは違います
非IE:stopPropagation()メソッドを使用してイベントのバブルを阻止できます.
IE:event.cancelBubble = true;
上のコードを修正します

$(".d2").click(function(event){
    	    alert(11);
    	    event.stopPropagation();
});

このように修正すると、jquery自体が
stopPropagation()はパッケージ化されています.
ソース:

stopPropagation: function() {
		this.isPropagationStopped = returnTrue;

		var e = this.originalEvent;
		if ( !e ) {
			return;
		}
		// if stopPropagation exists run it on the original event
		if ( e.stopPropagation ) {
			e.stopPropagation();
		}
		// otherwise set the cancelBubble property of the original event to true (IE)
		e.cancelBubble = true;
	}

jquery自体がブラウザを判断しているので、使うときに使います
stopPropagationでいいです.
また、非IEブラウザでpreventDefault()メソッドを使用すると、aタグのジャンプ、フォームのコミットなど、ブラウザのデフォルト動作を阻止することができ、IEブラウザで使用される
event.returnValue = false; に表示されます.jqueryでは、この方法もカプセル化されています

preventDefault: function() {
		this.isDefaultPrevented = returnTrue;

		var e = this.originalEvent;
		if ( !e ) {
			return;
		}

		// if preventDefault exists run it on the original event
		if ( e.preventDefault ) {
			e.preventDefault();

		// otherwise set the returnValue property of the original event to false (IE)
		} else {
			e.returnValue = false;
		}
}

これにより、いくつかのフォームの検証時に、直接return falseでバブルを阻止し、ページが検証されずにジャンプすることを阻止することができます.

jqueryのonメソッドについてのいくつかの紹介

Ext JS 4実装week(曜日)付き日付選択コントロール(実戦二)