JavaScript'te Olay Bağlantılarını Kaldırma

Bu derste, daha önce öğelere bağlamış olduğumuz olay işleyicilerini nasıl kaldıracağımızı öğreneceğiz. Örnek olarak aşağıdaki buton verilsin:

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

Bu butona func fonksiyonunu bağlayalım:

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

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

Şimdi, olay işleyicisinin ilk tıklamada tetiklenmesini, sonrasında ise butondan bağlantısının kaldırılmasını sağlayalım. Bunun için özel bir yöntem olan removeEventListener bulunur. Bu yöntem, ilk parametre olarak olay türünü, ikinci parametre olarak ise kaldırılması gereken fonksiyonun referansını alır.

Genellikle bu, olay işleyicisinin bağlandığı şekilde kaldırıldığı anlamına gelir. Yani, eğer şu şekilde bağladıysak: addEventListener('click', func), aynı parametrelerle şu şekilde kaldırırız: removeEventListener('click', func).

Şimdi, koyduğumuz görevi çözelim:

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

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