Javascript addEventListener chức năng

Question

Tôi mới để xử lý sự kiện và tôi đã đi qua một mã số được viết dưới đây

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

Có sự khác biệt bằng văn bản mã tương tự như

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

Cuối cùng chúng tôi gọi cùng một chức năng, do đó, nó làm cho một sự khác biệt hoặc là có một số lợi thế trong văn bản nó theo cách trên?

Answer 1

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

sẽ thực hiện initialiseMediaPlayer khi nội dung dom được tải.

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

là lỗi cú pháp; nếu bạn loại bỏ các dấu chấm phẩy:

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

gọi initialiseMediaPlayer ngay lập tức, sau đó vượt qua giá trị trả về (mà khả năng không phải là một chức năng) để addEventListener. Điều này sẽ không hoạt động như mong muốn.

---

Bạn có thể làm

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

(loại bỏ các dấu ngoặc = function gọi). Sau đó, initialiseMediaPlayer sẽ được thực hiện khi tải nội dung dom và hoạt động như mong muốn.

Tuy nhiên, không giống như trong trường hợp trước đây, initialiseMediaPlayer sẽ thực sự nhận được các đối số do trình duyệt đưa ra. Ngoài ra, giá trị trả về của nó được nhận bởi trình duyệt. Trong trường hợp DOMContentLoaded, rất có thể điều này không quan trọng lắm.

Bạn cũng tránh tạo thêm một hàm ẩn danh nếu bạn chuyển trực tiếp initialiseMediaPlayer. Một lần nữa, hiệu quả là không thực sự nhận thức được từ quan điểm của người dùng.

Answer 2

Đối số thứ hai về hàm addEventListener() chấp nhận chức năng loại. Vì vậy, bạn không thể vượt qua initialiseMediaPlayer(); vì đó là một lời gọi hàm.

Những gì bạn có thể làm là:

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

Answer 3

1). Có sự khác biệt lớn. Phiên bản thứ hai sẽ ném một lỗi. Nhưng ngay cả khi bạn khắc phục nó như thế này:

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

initialiseMediaPlayer sẽ không được gọi vào DOMContentLoaded vì () làm cho nó thực hiện ngay lập tức, trong khi bạn phải vượt qua một referece đến một chức năng, không kết quả của nó.

2). Một khác biệt đáng kể là ngữ cảnh yêu cầu yêu cầu.

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

initialiseMediaPlayer sẽ được gọi trong ngữ cảnh đối tượng document. Trong khi phiên bản đầu tiên sẽ được gọi trong ngữ cảnh đối tượng Window.

Answer 4

trong trường hợp đầu tiên

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

anonymous function function(){initialiseMediaPlayer();} được đăng ký để được kích hoạt khi sự kiện của tài liệu 'DOMContentLoaded' được kích hoạt

trong trường hợp thứ hai:

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

gì được đăng ký là người nghe sự kiện là kết quả của biểu thức initialiseMediaPlayer()

như vậy, vâng, có sự khác biệt :)