jQueryでの単発イベント

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

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

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

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

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

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

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

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

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

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

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

すべてのリンクにイベントをバインドしてください。リンクにマウスオーバーすると、リンクテキストの末尾にそのリンクのhrefを丸括弧で囲んで追加します。リンクへの最初のマウスオーバー後、 hrefをテキスト末尾に追加するイベントをそのリンクから解除する必要があります。

すべての入力フィールドについて、どれかがクリックされた時に自分のvalueを出力するようにしますが、最初のクリック時のみとします。入力フィールドへの2回目のクリックでは反応が起きないようにしてください。

数字を含む段落が与えられます。段落をクリックすると、その段落に含まれる数字の二乗が表示されるようにしますが、最初のクリック時のみとします。段落をダブルクリックすると、段落内の数字が 2倍になるようにしますが、これも最初の1回のみとします。

段落が与えられます。段落が最初にクリックされた時のみ、その段落の末尾に'!'が追加されるようにしてください。