Perbedaan event listener dan event handler pada DOM Javascript.

document.addEventListener('DOMContentLoaded', function () {
      const inputMaxLengthOnLoad = document.getElementById('inputNama').maxLength;
      document.getElementById('sisaKarakter').innerText = `Sisa karakter : ${inputMaxLengthOnLoad}`;

      // Mengukur panjang karakter
      document.getElementById('inputNama').addEventListener('input', function () {
        const jumlahKarakterDiketik = document.getElementById('inputNama').value.length;
        const jumlahKarakterMaksimal = document.getElementById('inputNama').maxLength;

        console.log('jumlahKarakterDiketik: ', jumlahKarakterDiketik);
        console.log('jumlahKarakterMaksimal: ', jumlahKarakterMaksimal);
        const sisaKarakterUpdate = jumlahKarakterMaksimal - jumlahKarakterDiketik;
        document.getElementById('sisaKarakter').innerText = `Sisa karakter : ${sisaKarakterUpdate.toString()}`;

        if (sisaKarakterUpdate === 0) {
          document.getElementById('sisaKarakter').innerText = 'Batas maksimal tercapai!';
        } else if (sisaKarakterUpdate <= 5) {
          document.getElementById('notifikasiSisaKarakter').style.color = 'red';
        } else {
          document.getElementById('notifikasiSisaKarakter').style.color = 'black';
        }
      });

      // Memunculkan jumlah karakter saat mengisi form
      document.getElementById('inputNama').addEventListener('focus', function () {
        console.log('inputNama: focus');
        document.getElementById('notifikasiSisaKarakter').style.visibility = 'visible';
      });

      // Menghilangkan jumlah karakter saat sudah mengisi form
      document.getElementById('inputNama').addEventListener('blur', function () {
        console.log('inputNama: blur');
        document.getElementById('notifikasiSisaKarakter').style.visibility = 'hidden';
      });

      // Mengubah tombol submit saat teks yg diinput sesuai dengan captcha
      document.getElementById('inputCaptcha').addEventListener('change', function () {
        console.log('inputCaptcha : change');
        const inputCaptcha = document.getElementById('inputCaptcha').value;
        const submitButtonStatus = document.getElementById('submitButton');

        if (inputCaptcha === 'PRNU') {
          submitButtonStatus.removeAttribute('disabled');
        } else {
          submitButtonStatus.setAttribute('disabled', '');
        }
      });

      // Untuk memverifikasi captcha
      document.getElementById('formDataDiri').addEventListener('submit', function (Event) {
        const inputCaptcha = document.getElementById('inputCaptcha').value;

        if (inputCaptcha === 'PRNU') {
          alert('Selamat! Captcha Anda Lolos');
        } else {
          alert('Captcha Anda belum tepat');
          document.getElementById('submitButton').setAttribute('disabled', '');
        }

        event.preventDefault();
      })

      // Untuk memunculkan alert saya menCopy
      document.getElementById('inputCopy').addEventListener('copy', function () {
        const nilai = document.getElementById('inputCopy').value;
        alert(`Anda telah menyalin ${nilai}`);
      })

      // Untuk memunculklan pesan saat memPaste
      document.getElementById('inputPaste').addEventListener('paste', function () {
        const nilaiPaste = document.getElementById('inputPaste').value;
        alert(`Anda telah menempel ${nilaiPaste}`);
      })

    });