jQueryでevent.targetとthisの違い--泡が立つ

1100 ワード

なぜ?targetとthis、
根本的な原因は
jsイベントは泡が立ちます.これは変わります.event.ターゲットは変更されず、誰が呼び出したのか、イベントをトリガーするDOM要素自体を指します.
栗を挙げて、例えばdiv要素の中にspan要素があって、誰をクリックしたいのか、背景の色がオレンジ色になると、私たちは普通簡単に書くことができます.
 $("div, input").click(function () { 
        $(this).css("background-color", "orange");
    });

実はjsバブルメカニズムのため、最終的に実現した効果は内部span要素をクリックすると、外のdiv要素もオレンジ色になります
泡が出るのを止める必要があります
方法1:eventを使用する.target
  $("div, input").click(function (event) {
        $(event.target).css("background-color", "orange");
    });

延長:
if (event.target == this){
			doSometing();
		}

方法2:直接戻して捨てる
  $("div, input").click(function (event) { 
        $(this).css("background-color", "orange");
        return false;
    });

方法3:eventを使用する.stopPropagation();
  $("div, input").click(function (event) { 
        $(this).css("background-color", "orange");
        event.stopPropagation();
    });