ฟังก์ชัน Javascript addEventListener

document.addEventListener("DOMContentLoaded", function() {
    initialiseMediaPlayer();
}, false);

จะดำเนินการ initialiseMediaPlayer เมื่อโหลดเนื้อหา dom

document.addEventListener("DOMContentLoaded", initialiseMediaPlayer();, false);

เป็นข้อผิดพลาดทางไวยากรณ์ หากคุณลบอัฒภาค:

document.addEventListener("DOMContentLoaded", initialiseMediaPlayer(), false);

เรียก initialiseMediaPlayer ทันที จากนั้นส่งคืนค่าที่ส่งคืน (ซึ่งอาจ ไม่ใช่ ฟังก์ชัน) ไปที่ addEventListener สิ่งนี้จะไม่เป็นไปตามที่ต้องการ

คุณทำได้

    document.addEventListener("DOMContentLoaded", initialiseMediaPlayer, false);

(ลบวงเล็บ = การเรียกใช้ฟังก์ชัน) จากนั้น initialiseMediaPlayer จะถูกดำเนินการกับเนื้อหา dom ที่โหลด และดำเนินการตามที่ต้องการ

อย่างไรก็ตาม ไม่เหมือนกับกรณีก่อนหน้านี้ initialiseMediaPlayer จะได้รับอาร์กิวเมนต์ที่กำหนดโดยเบราว์เซอร์จริงๆ นอกจากนี้เบราว์เซอร์ยังได้รับค่าส่งคืนอีกด้วย ในกรณีของ DOMContentLoaded เป็นไปได้มากว่าเรื่องนี้ไม่สำคัญมากนัก

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

1). ใช่มีความแตกต่างอย่างมาก เวอร์ชันที่สองจะเกิดข้อผิดพลาด แต่แม้ว่าคุณจะแก้ไขแบบนี้:

document.addEventListener("DOMContentLoaded", initialiseMediaPlayer(), false);

initialiseMediaPlayer จะไม่ถูกเรียกใช้บน DOMContentLoaded เนื่องจาก () ทำให้มันดำเนินการทันที ในขณะที่คุณต้องส่งต่อการอ้างอิงไปยัง ฟังก์ชัน ไม่ใช่ผลลัพธ์

2). ความแตกต่างที่สำคัญอีกประการหนึ่งคือ บริบทของการร้องขอ

document.addEventListener("DOMContentLoaded", initialiseMediaPlayer, false);

initialiseMediaPlayer จะถูกเรียกใช้ในบริบทของวัตถุ document ในขณะที่เวอร์ชันแรกจะถูกเรียกในบริบทของวัตถุ Window

อาร์กิวเมนต์ที่สองบนฟังก์ชัน addEventListener() ยอมรับ ฟังก์ชันประเภท ดังนั้นคุณไม่สามารถผ่าน initialiseMediaPlayer(); ได้เนื่องจากนั่นคือการเรียกใช้ฟังก์ชัน

สิ่งที่คุณสามารถทำได้คือ:

var onDOMContentLoaded = function() {
    initialiseMediaPlayer();
};
document.addEventListener("DOMContentLoaded", onDOMContentLoaded, false);

ในกรณีแรก

document.addEventListener("DOMContentLoaded", function() {
    initialiseMediaPlayer();
}, false);

ฟังก์ชั่นที่ไม่ระบุชื่อ function(){initialiseMediaPlayer();} ได้รับการลงทะเบียนเพื่อให้ถูกทริกเกอร์เมื่อเหตุการณ์ของเอกสาร 'DOMContentLoaded' ได้รับการทริกเกอร์

ในกรณีที่สอง:

document.addEventListener("DOMContentLoaded", initialiseMediaPlayer();, false);

สิ่งที่ลงทะเบียนเป็นผู้ฟังเหตุการณ์คือผลลัพธ์ของนิพจน์ initialiseMediaPlayer()

ใช่ มันมีความแตกต่าง :)