วิธี HTML DOM Document addEventListener()

คำนิยามและวิธีใช้

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 หน้าเชิงอุปกรณ์สำหรับเหตุการณ์
function

必需。事件发生时运行的函数。

เมื่อเกิดเหตุการณ์ จะส่งออบเจกต์เหตุการณ์เป็นอาทิตย์แรกส่งมาให้กับฟังก์ชัน

ประเภทของออบเจกต์เหตุการณ์ขึ้นอยู่กับเหตุการณ์ที่กำหนด ตัวอย่างเช่น เหตุการณ์ "click" อยู่ในออบเจกต์ MouseEvent
capture

ตัวเลือก (มาตรฐาน = false)

  • true - ปฏิบัติการบนขั้นตอนจับกุม
  • false - ปฏิบัติการบนขั้นตอนหลุดน้ำขึ้น

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

ไม่มี

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

วิธีนี้จะเพิ่มฟังก์ชันการฟังเหตุการณ์ที่กำหนดเพื่อเพิ่มลงในชุดฟังก์ชันการฟังเหตุการณ์ของตัวโครงสร้างปัจจุบันเพื่อจัดการกับเหตุการณ์ที่กำหนด type ถ้า capture ให้แก่ true จะถูกลงทะเบียนในฟังก์ชันการฟังเหตุการณ์จับกุม capture ให้แก่ false จะถูกลงทะเบียนในฟังก์ชันการฟังเหตุการณ์ทั่วไป

addEventListener() อาจถูกเรียกมากกว่าหนึ่งครั้ง ลงทะเบียนฟังก์ชันการจัดการเหตุการณ์หลายฟังก์ชันในโครงสร้างเดียวกันสำหรับเหตุการณ์เดียวกัน แต่จะต้องสังเกตว่า DOM ไม่สามารถของยืนยันลำดับที่ฟังก์ชันการจัดการเหตุการณ์ถูกเรียก

ถ้าฟังก์ชันการฟังเหตุการณ์ถูกลงทะเบียนในตัวโครงสร้างเดียวกันด้วย type และ capture ค่าที่ลงทะเบียนสองครั้ง ครั้งที่สองจะถูกละเลย หากกำลังจัดการกับเหตุการณ์ที่เกิดขึ้นบนโครงสร้างนี้ และลงทะเบียนตัวฟังก์ชันการฟังเหตุการณ์ใหม่บนโครงสร้างนี้ จะไม่เรียกฟังก์ชันการฟังเหตุการณ์ใหม่สำหรับเหตุการณ์นั้น

เมื่อใช้ Node.cloneNode() วิธีหรือ Document.importNode() วิธีนี้จะไม่คัดลอกเหมือนกันในกลุ่มนักฝึกฝนที่ลงทะเบียนในโครงสร้างต้นแบบ

วิธีนี้ก็ถูกนิยามในแบบที่เหมือนกันใน Document และ Window โอบเจกต์

การสนับสนุนเครื่องนี้

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 หน้าหลัก