JavaScript ฮ์ทดีดอม ตัวฟังก์ชันเฝาะการณ์

addEventListener() วิธี

ตัวอย่าง

เพิ่มตัวฟังการตอบเหตุเมื่อผู้ใช้คลิกที่ปุ่ม

document.getElementById("myBtn").addEventListener("click", displayDate);

ทดสอบด้วยตัวเอง

addEventListener() วิธีนี้ใช้เพื่อกำหนดกิจกรรมการจัดการเหตุการณ์สำหรับองค์ประกอบที่เฉพาะเจาะจง

addEventListener() วิธีนี้ใช้เพื่อเพิ่มกิจกรรมการจัดการเหตุการณ์อันดับเดียวกับองค์ประกอบ โดยไม่ทำการลบกิจกรรมการจัดการเหตุการณ์ที่มีอยู่แล้ว

คุณสามารถเพิ่มหลายกิจกรรมการจัดการเหตุการณ์ได้กับองค์ประกอบหนึ่ง

คุณสามารถเพิ่มโปรแกรมการตอบสนองเหตุการณ์ชนิดเดียวกันมากกว่าหนึ่งอันบนองค์ประกอบเดียวกัน ตัวอย่างเช่นสองเหตุการณ์ "click"

คุณสามารถเพิ่มโปรแกรมการตอบสนองเหตุการณ์บนวัตถุ DOM ทุกตัวไม่ใช่แค่องค์ประกอบ HTML เท่านั้น ตัวอย่างเช่น window วัตถุ

addEventListener() วิธีนี้ทำให้การควบคุมการตอบสนองของเหตุการณ์ต่อ bubble ง่ายขึ้น

ขณะที่ใช้ addEventListener() วิธีนี้ทำให้ JavaScript และ HTML ต่างกันเพื่อความเข้าใจง่ายขึ้น; แม้ว่าไม่ได้ควบคุม HTML ตัวที่สามก็ยังสามารถเพิ่มตัวติดตามเหตุการณ์ได้

คุณสามารถใช้ removeEventListener() วิธีนี้ทำให้การลบตัวติดตามเหตุการณ์ง่ายขึ้น

มุมมอง

element.addEventListener(event, function, useCapture);

ปรมาณาที่หนึ่งเป็นชนิดของเหตุการณ์ (เช่น "click" หรือ "mousedown")

ปรมาณาที่สองเป็นฟังก์ชันที่เราต้องการเรียกของเหตุการณ์

ปรมาณาที่สามเป็นค่าบูลและกำหนดว่าใช้ event bubble หรือ event capture ปรมาณานี้เป็นที่เลือกตั้ง

注意：ไม่ควรใช้เหตุการณ์ก่อนชื่อ "on" กรุณาใช้ "click" แทน "onclick"。

เพิ่มโปรแกรมการตอบสนองเหตุการณ์บนองค์ประกอบ

ตัวอย่าง

แสดงข้อความ "Hello World!" ขณะที่ผู้ใช้กดองค์ประกอบ:

element.addEventListener("click", function(){ alert("Hello World!"); });

ทดสอบด้วยตัวเอง

คุณยังสามารถนำหน้างาน "นาม" นอกตัวฟังก์ชันได้:

ตัวอย่าง

แสดงข้อความ "Hello World!" ขณะที่ผู้ใช้กดองค์ประกอบ:

element.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

ทดสอบด้วยตัวเอง

เพิ่มโปรแกรมการตอบสนองเหตุการณ์มากกว่าหนึ่งอันบนองค์ประกอบเดียวกัน

addEventListener() วิธีนี้ทำให้คุณสามารถเพิ่มเหตุการณ์มากกว่าหนึ่งอันบนองค์ประกอบเดียวกันโดยไม่ทับซ้ำเหตุการณ์ที่มีอยู่แล้ว:

ตัวอย่าง

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

ทดสอบด้วยตัวเอง

คุณสามารถเพิ่มเหตุการณ์ต่าง ๆ บนองค์ประกอบเดียวกันได้:

ตัวอย่าง

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

ทดสอบด้วยตัวเอง

เพิ่มโปรแกรมการตอบสนองเหตุการณ์ที่ Window วัตถุ

addEventListener() ทำให้คุณสามารถเพิ่มตัวติดตามเหตุการณ์ไปบนวัตถุ DOM HTML ทุกตัว อย่างเช่น องค์ประกอบ HTML วัตถุ HTML วัตถุ window หรือวัตถุที่สนับสนุนเหตุการณ์อื่น อย่างเช่น xmlHttpRequest วัตถุ。

ตัวอย่าง

เพิ่มตัวติดตามเหตุการณ์ที่ทำให้มีการเปลี่ยนแปลงขนาดหน้าต่างของผู้ใช้:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

ทดสอบด้วยตัวเอง

ส่งผ่านค่า

เมื่อส่งผ่านค่าที่ต้องการ ใช้ "function" ในรูปแบบนิรนามที่ใช้เรียกฟังก์ชันที่กำหนด

ตัวอย่าง

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

ทดสอบด้วยตัวเอง

การแพร่กระจายเหตุการณ์หรือจับกุมเหตุการณ์?

ใน HTML DOM มีวิธีแพร่กระจายเหตุการณ์สองรูปแบบ: แพร่กระจายและจับกุม

การแพร่กระจายเหตุการณ์เป็นวิธีที่กำหนดลำดับขององค์ประกอบเมื่อเกิดเหตุการณ์: หากมี <div> ภายใน <p> และผู้ใช้คลิกองค์ประกอบ <p> ควรประมวลผลเหตุการณ์ "click" ขององค์ประกอบใดก่อน?

ในการแพร่กระจาย องค์ประกอบภายในจะได้รับการประมวลผลก่อนที่จะเป็นองค์ประกอบภายนอกเช่นนี้: ก่อนที่จะประมวลผลเหตุการณ์คลิกของ <p> ให้ประมวลผลเหตุการณ์คลิกของ <div>

ในการจับกุม องค์ประกอบนอกสุดขององค์ประกอบจะได้รับการประมวลผลก่อนที่จะเป็นองค์ประกอบภายในเช่นนี้: ก่อนที่จะประมวลผลเหตุการณ์คลิกของ <div> ให้ประมวลผลเหตุการณ์คลิกของ <p>

ในวิธี addEventListener() คุณสามารถกำหนดรูปแบบการแพร่กระจายโดยใช้ปรมาณ "useCapture"

addEventListener(event, function, useCapture);

ค่าเริ่มต้นคือ falseถ้าค่านี้ตั้งเป็น จะใช้การแพร่กระจายของฝั่งบริเวณtrue

ตัวอย่าง

ถ้าค่านี้ตั้งเป็น
document.getElementById("myP").addEventListener("click", myFunction(), true);

ทดสอบด้วยตัวเอง

document.getElementById("myDiv").addEventListener("click", myFunction(), true);

removeEventListener() วิธี removeEventListener() addEventListener() ตัวแปลที่เพิ่มเหนือนี้ของวิธี

ตัวอย่าง

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

ทดสอบด้วยตัวเอง

การสนับสนุนบราวเซอร์

ตัวเลขในตารางกำหนดเวอร์ชั่นบราวเซอร์แรกที่สนับสนุนวิธีเหล่านี้อย่างสมบูรณ์

วิธี
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

หมายเหตุ：IE 8 และ Opera 6.0 หรือเวอร์ชั่นเก่ากว่านั้นไม่สนับสนุน addEventListener() และ removeEventListener() วิธีอุปกรณ์ อย่างไรก็ตาม สำหรับเวอร์ชั่นบราวเซอร์พิเศษเหล่านี้ คุณสามารถใช้ attachEvent()} วิธีการเพิ่มรายการการจัดการเหตุการณ์ให้กับองค์ประกอบ โดย detachEvent() วิธีการลบ:

element.attachEvent(event, function);
element.detachEvent(event, function);

ตัวอย่าง

แนวทางที่เป็นสามัญ

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // สำหรับเบราเซอร์ทั่วไป ยกเว้น IE 8 และเก่ากว่า
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // สำหรับ IE 8 และเก่ากว่า
    x.attachEvent("onclick", myFunction);
}

ทดสอบด้วยตัวเอง

คู่มืออ้างอิงวัตถุเหตุการณ์ HTML DOM

สำหรับรายการเหตุการณ์ HTML DOM ทั้งหมด โปรดเข้าชมเว็บไซต์เต็มของเรา คู่มืออ้างอิงวัตถุเหตุการณ์ HTML DOM.