JavaScriptでのイベントの削除

このレッスンでは、以前に要素にバインドしたイベントハンドラを削除する方法を学びます。例として、次のボタンが与えられているとします：

<input id="button" type="submit">

このボタンに関数 func をバインドしましょう：

let button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
	console.log('!!!');
}

次に、イベントハンドラが最初のクリックでトリガーされ、その後ボタンから削除されるようにしてみましょう。このために、特別なメソッド removeEventListener が存在します。このメソッドは、最初のパラメータとしてイベントタイプを受け取り、 2番目のパラメータとして削除する必要がある関数への参照を受け取ります。

一般的に、これはイベントハンドラがバインドされたのと同じ方法で削除されることを意味します。つまり、このようにバインドした場合：addEventListener('click', func)、同じパラメータで削除します、このように：removeEventListener('click', func)。

では、設定したタスクを解決しましょう：

let button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
	console.log('!!!');
	this.removeEventListener('click', func);
}

リンクとボタンが与えられています。ボタンをクリックすると、リンクテキストの末尾に、その href 属性の内容が丸括弧で追加されます。この追加が最初のクリック時のみ行われるようにしてください。

値が 1 のボタンが与えられています。このボタンをクリックするたびに、その値が1ずつ増加するようにします。ボタンの値が 10 に達した後、イベントハンドラを削除して、ボタンがクリックに反応しなくなるようにします。