Bagaimana untuk Mendengar Acara Hantar Borang dalam JavaScript Tanpa Mengubah HTML?

Mendengar Borang Hantar Acara dalam JavaScript tanpa Mengubah Suai HTML

Dalam artikel ini, kami menangani cabaran biasa mendengar borang penyerahan acara tanpa perlu mengubah suai kod HTML. Daripada bergantung pada atribut onClick atau onSubmit dalam HTML, kami menyediakan penyelesaian JavaScript tulen.

Untuk mencapai matlamat ini, kami memanfaatkan kaedah EventTarget.addEventListener. Kaedah ini membolehkan kami mendaftarkan fungsi panggil balik yang akan dilaksanakan apabila peristiwa tertentu berlaku pada elemen borang.

<code class="javascript">var ele = /*Your Form Element*/;
if (ele.addEventListener) {
  ele.addEventListener("submit", callback, false); // Modern browsers
} else if (ele.attachEvent) {
  ele.attachEvent('onsubmit', callback); // Old IE
}</code>

Ganti "ele" dengan rujukan kepada elemen borang anda dan "panggil balik" dengan fungsi anda mahu laksanakan apabila borang diserahkan.

Untuk menghalang kelakuan penyerahan borang asli (iaitu, memuat semula halaman), gunakan kaedah .preventDefault() dalam fungsi panggil balik anda:

<code class="javascript">document.querySelector("#myForm").addEventListener("submit", function (e) {
  if (!isValid) {
    e.preventDefault(); // Stop form from submitting
  }
});</code>

Mendengar Menghantar Acara dengan Perpustakaan

Walaupun tidak perlu, anda mungkin lebih suka menggunakan perpustakaan untuk mendengar menghantar acara. Begini cara anda boleh melakukannya menggunakan perpustakaan biasa:

jQuery

<code class="javascript">$(ele).submit(callback);</code>

Contoh

[jsfiddle.net/ DerekL/wnbo1hq0/show](http://jsfiddle.net/DerekL/wnbo1hq0/show)

Dengan menggunakan teknik ini, anda boleh mendengar borang penyerahan acara dalam JavaScript dengan mudah tanpa perlu menyentuh kod HTML.

Atas ialah kandungan terperinci Bagaimana untuk Mendengar Acara Hantar Borang dalam JavaScript Tanpa Mengubah HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!