ການຕິດຕາມ addEventListener() HTML DOM Document

ການອະທິບາຍແລະການນໍາໃຊ້

addEventListener() ວິທີການຕິດຕັ້ງຜູ້ຄວບຄຸມການເລື່ອງໃຫ້ເອກະສານ

ຄວາມຄິດ

ຄູ່ມວນຊົນ 1

ສະເໜີ click ການເລື່ອງໃຫ້ເອກະສານ

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

ການທົດລອງຕົວເອງ

ຂອງຄຳເວົ້າທີ່ງາຍດາຍຫຼາຍ:

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

ການທົດລອງຕົວເອງ

ຕົວຢ່າງ 2

ທ່ານສາມາດເພີ່ມຜູ້ຮັບຕາມເຫດການຫຼາຍຊະນິດຫຼາຍກວ່າໜຶ່ງໃຫ້ແກ່ໂຕເອງ:

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

ການທົດລອງຕົວເອງ

ຕົວຢ່າງ 3

ທ່ານສາມາດເພີ່ມຫົວວິຢາທີ່ຫຼາຍຊະນິດຂຶ້ນ:

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

ການທົດລອງຕົວເອງ

ຕົວຢ່າງ 4

ການສົ່ງມາການຈະລົງຂອງວິທີສາຍທີ່ມີພາກສານກັບ "ວິທີສາຍບໍ່ມີຊື່":

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

ການທົດລອງຕົວເອງ

ຕົວຢ່າງ 5

ການປ່ຽນເງິນສະພາບຂອງແຜນຮູບ:

document.addEventListener("click", function(){
  document.body.style.backgroundColor = "red";
});

ການທົດລອງຕົວເອງ

ຕົວຢ່າງ 6

ການນຳໃຊ້ removeEventListener() ວິທີ:

// ການເພີ່ມຜູ້ຮັບຕາມເຫດການ
document.addEventListener("mousemove", myFunction);
// ຖອນຜູ້ຮັບຕາມເຫດການ
document.removeEventListener("mousemove", myFunction);

ການທົດລອງຕົວເອງ

ຂອງຄຳເວົ້າ

document.addEventListener(type, function, capture)

ພຽງພໍ

ພຽງພໍ ອະທິບາຍ
type

ສະຫຼຸບຄວາມຈໍາຕັດ。ຊື່ຫົວວິຢາຂອງເຫດການ。

ບໍ່ຂໍ້ສະເໜີຄວັກ "on"。

ບໍ່ຂໍ້ສະເໜີ "click" ແທນ "onclick"。

ທຸກໆຫົວວິຢາ HTML DOM 事件ທີ່ຢູ່ໃນບ່ອນດັ່ງລຽງ:

ປືກສາລາຍງາຍ HTML DOM Event

function

ສະຫຼຸບຄວາມຈໍາຕັດ。ຫົວວິຢາທີ່ດຳເນີນໃນເວລາທີ່ເຫດການເກີດຂຶ້ນ。

当事件发生时,将事件对象作为第一个参数传递给函数。

事件对象的类型取决于指定的事件。例如,"click" 事件属于 MouseEvent 对象。

capture

可选(默认 = false)。

  • true - 处理程序在捕获阶段执行
  • false - 处理程序在冒泡阶段执行

ຜົນກະທົບ

ບໍ່ມີ.

ລາຍການພື້ນຖານເຕັກນິກ

ກົນລະບົບນີ້ຈະເພີ່ມກົນລະບົບການກວດກາເຫດການບັນດາຄຳມູນຄໍາໃຫ້ມີການກວດກາເຫດການບັນດາຄຳມູນຄໍາບັນດາຄຳມູນຄໍາ. ຖ້າ capture ຖ້າຕັ້ງໃສ່ true, ມັນຈະຖືກສະໝັກງານງານເຫດການການກວດກາ. ຖ້າ capture ຖ້າຕັ້ງໃສ່ false, ມັນຈະຖືກສະໝັກງານງານເຫດການຄົນທຳມະດາ.

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

ຖ້າມີກົນລະບົບການກວດກາເຫດການບັນດາຄຳມູນຄໍາໃນອັນດັບດຽວກັນ capture ປະຈໍາຜູ້ນຳການພາຍໃນຂະແນນນັ້ນຈະຖືກທຳລາຍ. ຖ້າກຳລັງກວດກາເຫດການທີ່ມີການສະແດງໃນວັດຖຸບັນດາຄຳມູນຄໍາຈະບໍ່ມີການກະຕຸ້ນກົນລະບົບການກວດກາເຫດການບັນດາຄຳມູນຄໍາໃໝ່.

ຖ້າມີການສະໝັກງານ Node.cloneNode() ກົນລະບົບຫຼື Document.importNode() ກົນລະບົບທີ່ສື່ມວັດຖຸ Document Node ຈະບໍ່ສື່ມກົນລະບົບການກວດກາເຫດການທີ່ມີການສະແດງໃນໂຕກໃນຕົ້ນ.

ກົນລະບົບນີ້ຈະມີການສະແດງຢູ່ Document ແລະ Window Object ແລະຈະມີວິວັດທະນາການຄືກັນ.

ການສະໜັບສະໜູນບັນນາທິການ

document.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 ເຫດການທັງໝົດ