วิธี addEventListener() ของ HTML DOM

คำนำทางและการใช้งาน

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(type, function, useCapture)

ตัวแปร

ตัวแปร คำอธิบาย
type

สำคัญ ชื่อเหตุการณ์

ไม่ควรใช้คำหน้า "on"

ใช้ "click" แทน "onclick"


รายการเหตุการณ์ DOM ที่เต็มทั้งหมด
function สำคัญ ฟังก์ชันที่ทำงานเมื่อเกิดเหตุการณ์
useCapture

ตัวเลือก (ค่าเริ่มต้น = false)

  • false - ระยะเวลาที่ปฏิบัติการทำงาน
  • true - ระยะเวลาที่ปฏิบัติการทำงาน

ค่าที่ส่งกลับ

ไม่มี

รายละเอียดเทคนิค

วิธีนี้จะเพิ่มฟังก์ชันจัดการเหตุการณ์ที่กำหนดเพื่อลงทะเบียนในชุดฟังก์ชันจัดการเหตุการณ์ของตัวเลขปัจจุบันเพื่อจัดการเหตุการณ์ที่กำหนด type ของเหตุการณ์ useCapture เป็น true ซึ่งฟังก์ชันจัดการเหตุการณ์ถูกลงทะเบียนเป็นฟังก์ชันจัดการเหตุการณ์ที่จับตามอง useCapture เป็น 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 ที่เต็มทั้งหมด