Sự kiện được đăng ký với addEventListener được lưu trữ ở đâu?

Question

Tôi bắt đầu với một trang trống. Nếu tôi chạy document.body.onclick tôi nhận được null. Nếu tôi áp dụng mã sau:

document.body.onclick = function() { return "Click"; }; 

Tôi nhận được function() { return "Click"; } khi tôi chạy document.body.onclick. Điều đó có ý nghĩa! Nhưng khi tôi chạy

document.body.addEventListener("click", function() { return "Click"; }); 

document.body.onclick vẫn là null, nhưng sản lượng là "Click" khi tôi chạy document.body.click().

Vì vậy, câu hỏi của tôi là, chức năng được lưu trữ khi sử dụng addEventListener ở đâu?

Answer 1

Được lưu trữ trong danh sách thực tế (mảng) của Event người nghe cho body.

Các phần tử có danh sách các tham chiếu hàm trong chúng cho trình xử lý sự kiện của chúng. Các tham chiếu này không có trong DOM. Khi kích hoạt một sự kiện, trình duyệt phải chạy qua tất cả các phần tử thích hợp tìm kiếm các tham chiếu này và chạy chúng theo thứ tự.

Nhưng dù sao ... Có rất nhiều thứ đang diễn ra trong nền mà DOM không nhìn thấy. Toàn bộ hệ thống sự kiện là một trong số đó. Và tốt, toàn bộ động cơ Javascript cơ bản và với một cây đối tượng lớn cho trang được tải hiện tại, tất cả được lưu trữ trong bộ nhớ bí ẩn. Chúng thường được truy cập bằng cách sử dụng các giao diện document và window, giống như DOM. Nhưng các sự kiện được đăng ký đúng sẽ nằm trong cây đối tượng lớn được lưu trữ trong bộ nhớ, không giống với DOM. Chỉ liên quan chặt chẽ. Tôi xem DOM là một giao diện hoặc giữa người giữa cây đối tượng lớn này và chính HTML.

Di chuyển trên ... onclick bị giới hạn chỉ một giá trị hoặc một chuỗi javascript duy nhất nằm trong DOM. Chưa thực sự đăng ký. Vì vậy, không phải là người nghe Sự kiện thực tế. Ở đây DOM là loại giống như một shim ở chỗ nó đạo cụ lên các dây onclick để chạy như các sự kiện. Vì vậy, chuỗi này cũng được chạy khi sự kiện được kích hoạt. Bởi trình duyệt, vào đúng thời điểm, bí ẩn. Trong một vòng về cách, nó có thể nói rằng là một phần của những gì DOM nói chung, nó shims trong tất cả các văn bản trong dòng như thế này từ HTML, để truy cập của nó bằng cách document. Nhưng nói chung, chúng chỉ được lưu trữ dưới dạng chuỗi thay vì các đối tượng thực tế trong cây. Đây có lẽ là một trong nhiều lý do tại sao DOM lại quá ngu ngốc.

Trong khi addEventListenener thực sự đăng ký nó như là một sự kiện có thật, do đó bạn có thể:

• Có bội
• Tiếp cận họ như đối tượng
• Thêm và loại bỏ chúng theo ý muốn
• Chọn một chương trình tuyên truyền sự kiện
• Tự động kiểm soát sự kiện trong thời gian chạy

• Có sự kiện tự động xóa chính nó sau lần chạy đầu tiên

  ... và một vài tính năng khác.

Cả hai đều là loại sắp xếp, hai trình xử lý sự kiện khác nhau cho cùng một sự kiện.Một là trình nghe sự kiện đầy đủ khi sử dụng addEventListener. Và cái kia chỉ là một chuỗi văn bản nằm trong DOM mà trình duyệt sẽ chạy "vào đúng thời điểm", nhưng không phải là một trình nghe sự kiện đầy đủ thực sự.

Câu hỏi này có thể làm sáng tỏ ... addEventListener vs onclick

Answer 2

Sự khác biệt chính giữa .onclick = và .addEventListener là .onclick bộ xử lý sự kiện thay thế có sẵn. Thay vào đó, .addEventListener thêm nhiều trình xử lý sự kiện vào DOM Element. .addEventListener là một cách hiện đại để thêm trình xử lý sự kiện. Nơi chúng được lưu trữ, tôi không có ý tưởng, nhưng không phải trong onclick vì onclick giữ một giá trị duy nhất, không phải là một mảng xử lý sự kiện. Bạn có thể đọc thêm về vấn đề này ở đây:

https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener#Older_way_to_register_event_listeners

http://www.w3.org/TR/DOM-Level-3-Events/#events-DocumentEvent-createEvent

Vì vậy, câu trả lời là bạn không thể có được xử lý sự kiện bổ sung bởi .addEventListener bằng cách nhận giá trị của onlick.