jQueryでの単発イベント

イベントの解除を メソッド off を使って学んだ時、 以下のような構造を使いました：

javascript$('li').on('click', function() {
  $(this).append('!');
  $(this).off('click', func);
});

まず、 on を使ってハンドラー関数をアタッチし、 その後offを使ってデタッチしていました。

jQueryには便利なメソッド one があります。 これは一度きりのイベントをバインドすることができ、 一度だけ実行された後、自動的に解除されます。このメソッドは 最初のパラメータにイベントタイプを、 2番目にバインドする関数を受け取ります。

次の例は、以下のHTMLコードを基に考えてみましょう：

html<ul>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ul>

CSSコードは以下のようになります：

cssli {
  width: 100px;
  cursor: pointer;
}

次に、各liに 一度きりのイベントをバインドします：

javascript$('li').one('click', function() {
  $(this).append('!');
});

リストの項目をクリックしてみてください。 ご覧の通り、メソッドoneのおかげで 同じ効果を得ることができました。