0 
<div id="tours">
  <h1>Guided Tours</h1>
  <ul>
    <li class="usa tour" data-discount="299">
      <h2>New York, New York</h2>
      <span class="details">$1,899 for 7 nights</span>
      <button class="book">Book Now</button>
    </li>
    <li class="europe tour" data-discount="176">
      <h2>Paris, France</h2>
      <span class="details">$2,299 for 7 nights</span>
      <button class="book">Book Now</button>
    </li>
    <li class="asia tour" data-discount="349">
      <h2>Tokyo, Japan</h2>
      <span class="details">$3,799 for 7 nights</span>
      <button class="book">Book Now</button>
    </li>
  </ul>
</div>

上がHTMLコード、下がDOM操作部分です。

$(document).ready(function(){
  $("li.tour button.book").on("click", function(){
    var tour = $(this).closest(".tour");
    var discount = tour.data("discount");
    var message = $("<span>Call 1-555-jquery-air for a $" + discount + "</span>");
    tour.append(message);
    $(this).remove();
  });
});

上記のコードは正常に動作します。しかし、アプローチを行う正しい方法は以下のようであり、彼らはそれをイベント委任と呼んでいます

$(document).ready(function(){
  $("li.tour").on("click", "button", function(){
    var tour = $(this).closest(".tour");
    var discount = tour.data("discount");
    var message = $("<span>Call 1-555-jquery-air for a $" + discount + "</span>");
    tour.append(message);
    $(this).remove();
  });
});
4

2 に答える 2

2

li.tour他の人が指摘しているように、どちらのソリューションも、イベントハンドラーを3つの要素にアタッチするため（ aまたは a ） 、どちらのソリューションも現状ではあまり区別できませんbutton.book。

イベント バブリングを実際に利用するには、次のようにします。

$(document).ready(function(){
  $("ul").on("click", "button.book", function(){
    var tour = $(this).closest(".tour");
    var discount = tour.data("discount");
    var message = $("<span>Call 1-555-jquery-air for a $" + discount + "</span>");
    tour.append(message);
    $(this).remove();
  });
});

... この方法では、1 つのイベント ハンドラーのみが にバインドされulます。イベントのバブリングbuttonは、 のクリックが最終的に で発生することを意味します。これによりul、jQuery はクリック イベントが発生したことを認識します。

ここでの利点は次のとおりです。

  • 3 つの要素をループしていません (1 つだけ)。
  • DOM には、3 つではなく、1 つのイベント ハンドラーのみがバインドされています。

...明らかに、これは今のところ無視できる（ほとんど存在しない）利点ですが、関係する要素の量が増えるにつれて大きくなります。

小さな欠点は、 の子孫をクリックするulと にもulバブリングし、クリック ハンドラーを呼び出すかどうかを jQuery が決定することです (したがって、パフォーマンスにわずかな影響があります)。

于 2013-09-07T17:46:34.163 に答える