ການເພີ່ມການກວດສອບບັນດາບັນທຶກ

ການກໍານົດແລະການນໍາໃຊ້

addEventListener() ການຕິດຕັ້ງຜູ້ຈັດການເຫດການໃຫ້ກັບປະກອບ.

ຕົວຢ່າງ

ຕົວຢ່າງ 1

ເພີ່ມການສະແດງງານ click ໃຫ້ <button> ສະຖານທີ່:

element.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

ທ້າທາຍພາສາຕອນຕົ້ນ

ຕົວຢ່າງ 2

ວິທິການທີ່ຫຼາຍກວ່າ:

element.addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});

ທ້າທາຍພາສາຕອນຕົ້ນ

ທ່ານສາມາດຫາຕົວຢ່າງຫຼາຍອີກໃນບໍລິເວນກ້ອງຢູ່ລາຍການ.

ວິທິການ

element.addEventListener(ຖ້າວິທີການສະໝັກງານການສະແດງງານຈະຖືກສະໝັກງານໃນວັດຖຸດຽວກັນທີ່ມີວິທີການສະໝັກງານດຽວກັນ, addEventListener() ອາດຖືກເອິ້ນຫຼາຍຄັ້ງ. ແຕ່ວ່າ, DOM ບໍ່ສາມາດຢືນຢັນວິທີການເອິ້ນຂອງການສະແດງງານຫຼາຍຄັ້ງ., ບໍ່ຂໍ້ສະເໜີ "click" ແທນ "onclick"., type,

)

) ສະເພາະ
ຖ້າວິທີການສະໝັກງານການສະແດງງານຈະຖືກສະໝັກງານໃນວັດຖຸດຽວກັນທີ່ມີວິທີການສະໝັກງານດຽວກັນ, addEventListener() ອາດຖືກເອິ້ນຫຼາຍຄັ້ງ. ແຕ່ວ່າ, DOM ບໍ່ສາມາດຢືນຢັນວິທີການເອິ້ນຂອງການສະແດງງານຫຼາຍຄັ້ງ.

描述

ສະເພາະ. ຊື່ງການເກີດງານ.

ບໍ່ຂໍ້ສະເໜີ "on" ກ່ອນ.


ລາຍການຂອງ DOM ເຫດການ
ບໍ່ຂໍ້ສະເໜີ "click" ແທນ "onclick". function
type

ສະເພາະ. ວິທີການທີ່ຈະດຳເນີນໃນເວລາການເກີດງານ.

  • ເປັນທາງເລືອກ (default = false). false
  • - ການດຳເນີນຄັນນັ້ນຈະດຳເນີນໃນການພົ່ນພົງ. true

- ການດຳເນີນຄັນນັ້ນຈະດຳເນີນໃນການກວດກາ.

返回值

ບໍ່ມີ.

技术细节 ຖ້າວິທີການສະໝັກງານການສະແດງງານຈະຖືກສະໝັກງານໃນວັດຖຸດຽວກັນທີ່ມີວິທີການສະໝັກງານດຽວກັນ, addEventListener() ອາດຖືກເອິ້ນຫຼາຍຄັ້ງ. ແຕ່ວ່າ, DOM ບໍ່ສາມາດຢືນຢັນວິທີການເອິ້ນຂອງການສະແດງງານຫຼາຍຄັ້ງ. 的事件. ຖ້າ type ວິທີນີ້ຈະສົ່ງວິທີການສະໝັກງານການສະແດງງານມີການສະໝັກງານໃນສະຖານທີ່ທີ່ຖືກສະໝັກງານແບບການສະແດງງານທົ່ວໄປ. type true

ທີ່ຖືກສະໝັກງານວ່າການສະແດງງານທົ່ວໄປ. ຖ້າ

false ຖ້າວິທີການສະໝັກງານການສະແດງງານຈະຖືກສະໝັກງານໃນວັດຖຸດຽວກັນທີ່ມີວິທີການສະໝັກງານດຽວກັນ, addEventListener() ອາດຖືກເອິ້ນຫຼາຍຄັ້ງ. ແຕ່ວ່າ, DOM ບໍ່ສາມາດຢືນຢັນວິທີການເອິ້ນຂອງການສະແດງງານຫຼາຍຄັ້ງ. ແລະ type useCapture

ບໍ່ວ່າຈະມີການສະໝັກງານສະຖານທີ່ບໍ່ອາດຈະຖືກການສະໝັກງານຄັ້ງທີສອງ. ຖ້າກຳລັງກຳລັງກຳລັງຈັດການການສະແດງງານໃນວັດຖຸ, ຖ້າມີການສະໝັກງານການສະແດງງານໃຫມ່ໃນວັດຖຸດັ່ງກ່າວ, ການສະແດງງານໃຫມ່ຈະບໍ່ຖືກເອິ້ນ. Node.cloneNode() ວິທີນີ້ຫຼື Document.importNode() ວິທີນີ້ສົ່ງວັດຖຸ Document ບໍ່ຈະສົ່ງຜູ້ຟັງການກະທຳທີ່ມີລະບຽບການສະໝັກງານໃນວັດຖຸແບບເດີມ.

ວິທີນີ້ກໍ່ປະກອບໃນ Document ແລະ Window ມີການອອກຄຳສັ່ງໃນວັດຖຸດັ່ງກ່າວແລະວຽກບັນຫາຄືກັນ.

ຕົວຢ່າງຫຼາຍອີກ

ຕົວຢ່າງ 3

ທ່ານສາມາດເພີ່ມອຸປະກອນທີ່ຫຼາກຫຼາຍໃນປະກອນດຽວກັນ:

element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);

ທ້າທາຍພາສາຕອນຕົ້ນ

ຕົວຢ່າງ 4

ທ່ານສາມາດເພີ່ມອຸປະກອນທີ່ຫຼາກຫຼາຍໃນປະກອນດຽວກັນ:

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);

ທ້າທາຍພາສາຕອນຕົ້ນ

ການສະແດງຫຼັກວັດທະນະທຳ 5

ສຳລັບການສົ່ງຄຳຕອບ, ຂໍ້ສະໜອງປະຕິບັດຜູ້ບໍ່ມີຊື່:

element.addEventListener("click", function() {
  myFunction(p1, p2);
});

ທ້າທາຍພາສາຕອນຕົ້ນ

ການສະແດງຫຼັກວັດທະນະທຳ 6

ການປ່ຽນສີການສະໜອງບັດ <button>:

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

ທ້າທາຍພາສາຕອນຕົ້ນ

ການສະແດງຫຼັກວັດທະນະທຳ 7

ການແຕກຕ່າງລະບົບການຕົວເຫດການຂອງຕົວເຫດການ:

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

ທ້າທາຍພາສາຕອນຕົ້ນ

ການສະແດງຫຼັກວັດທະນະທຳ 8

ການລົບກົນລະບົບເຫດການ:

element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);

ທ້າທາຍພາສາຕອນຕົ້ນ

ການສະໜັບສະໜູນຄຸກຄອມພິວເຕີ້

element.addEventListener() ເປັນປະສົມວັດທະນະທຳ DOM Level 2 (2001).

ທຸກຄຸກຄອມພິວເຕີ້ທັງໝົດສາມາດສະໜັບສະໜູນມັນຢ່າງເຕັມສ່ວນ:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
ສະໜັບສະໜູນ 9-11 ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ

ຂະແໜງກວດສອບ

ກົນລະບົບໃນປະກອບສິ່ງ:

ກົນລະບົບ addEventListener()

ກົນລະບົບ removeEventListener()

ກົນລະບົບໃນໂຕກະສັບ:

ກົນລະບົບ addEventListener()

ກົນລະບົບ removeEventListener()

ການສອນ:

HTML DOM EventListener

ລາຍການຂອງ DOM ເຫດການ