JavaScript ' ini ' dan pengendali acara

pemprosesan acara javascript: pemahaman yang mendalam tentang

kata kunci dan mekanisme pemprosesan acara this

Aplikasi web klien yang cekap tidak dapat dipisahkan dari mekanisme pengendalian acara JavaScript. Peristiwa membolehkan JavaScript mengesan tingkah laku pengguna, seperti hover tetikus, mengklik pautan, menatal halaman, saiz semula tetingkap, menyeret objek, dll. Kod JavaScript anda boleh mendaftarkan pengendali acara yang mencetuskan apabila peristiwa tertentu berlaku. Kebanyakan penyemak imbas akan lulus satu objek yang mengandungi maklumat acara ke fungsi, seperti maklumat utama, kedudukan kursor tetikus, dll. Anda kemudian boleh melakukan tindakan tertentu seperti elemen animasi, memulakan permintaan AJAX, atau menyekat tingkah laku lalai penyemak imbas. Di samping itu, kata kunci

juga boleh ditetapkan. Biasanya, this menunjuk kepada elemen yang mencetuskan peristiwa itu, tetapi tidak selalu. this

Elakkan menggunakan pengendali acara inline

Pengendali acara inline (mis.

) adalah mudah, tetapi mempunyai banyak kelemahan: mereka sangat ketat, canggung dan boleh membongkar kod HTML. Oleh kerana panggilan acara dan pengendali ditakrifkan di lokasi yang berbeza, ia adalah rumit untuk mengekalkan. Akhirnya, kerana peristiwa boleh dipanggil apabila halaman beban, tag skrip mesti diletakkan di bahagian atas HTML, bukan di bahagian bawah. <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onclick="EventHandler();">click me</a>

acara tradisional DOM0

Walaupun kaedah pengendalian peristiwa tradisional (contohnya,

) adalah mudah dan langsung, hanya satu pengendali yang boleh diberikan setiap jenis acara. NOTA: Jangan gunakan link.onclick = EventHandler;, ini akan melaksanakan fungsi link.onclick = EventHandler(); dengan serta -merta dan berikan nilai pulangan (undefined) ke atribut EventHandler nod https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15blink. Ini tidak akan melaporkan kesilapan, tetapi pengendali anda tidak akan dipanggil apabila peristiwa klik berlaku. onclick

Acara DOM2 moden

Pemprosesan acara moden membolehkan beberapa pengendali ditentukan untuk acara yang sama. Walau bagaimanapun, disebabkan oleh beberapa perbezaan dalam pelaksanaan antara Microsoft dan W3C, hanya IE9 dan ke atas sokongan

. Kita boleh menggunakan pengesanan objek untuk membuat fungsi tambahan penyemak imbas fungsi tambahan: addEventListener()

AttachEvent(link, "click", EventHandler);

function AttachEvent(element, type, handler) {
  if (element.addEventListener) element.addEventListener(type, handler, false);
  else element.attachEvent("on" + type, handler);
}

Sama seperti acara DOM0, semua pelayar menetapkan

ke elemen yang mencetuskan acara ... kecuali IE8 dan ke bawah. Dalam IE8 dan ke bawah, this sentiasa menjadi objek this global. Nasib baik, kita dapat menentukan elemen sasaran dari objek acara: window

function EventHandler(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;
  console.log(target);
}

Makna kata kunci dalam pengendali acara JavaScript this

this Kata kunci merujuk kepada konteks di mana fungsi dipanggil. Dalam pengendali acara, this biasanya menunjuk kepada elemen HTML yang melampirkan pengendali acara. Ini membolehkan anda mengakses dan memanipulasi elemen secara langsung.

cara menggunakan this dalam pengendali acara

this Menggunakan this adalah mudah, sama seperti menggunakan pembolehubah lain. Ingat,

menunjuk kepada elemen HTML yang melampirkan pengendali acara.

jenis acara yang berbeza dalam JavaScript

JavaScript menyokong pelbagai peristiwa seperti click, mouseover, mouseout, keydown, keyup, load, unload,

,

dan .

bagaimana untuk melampirkan pengendali acara ke elemen addEventListener

Pengendali acara boleh dilampirkan pada elemen menggunakan kaedah . Kaedah ini menerima dua parameter: nama acara yang akan didengar dan fungsi untuk dijalankan apabila peristiwa berlaku.

objek acara dalam javascript

Objek acara adalah objek khas yang dibuat apabila peristiwa berlaku. Objek ini mengandungi maklumat mengenai peristiwa, seperti jenis acara, elemen sasaran, masa kejadian, dll. Anda boleh mengakses objek acara dalam fungsi pengendali acara.

Atas ialah kandungan terperinci JavaScript ' ini ' dan pengendali acara. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!