Sự kiện vs CustomEvent

Question

Tôi đã tự hỏi, mục đích của CustomEvent là gì, bởi vì nó có thể dễ dàng được mô phỏng bởi cũ Event.

Vì vậy, sự khác biệt giữa những gì là:

var e = new Event("reload"); 
e.detail = { 
    username: "name" 
}; 
element.dispatchEvent(e); 

và

var e = new CustomEvent("reload", { 
    detail: { 
     username: "name" 
    } 
}); 
inner.dispatchEvent(e); 

Tại sao CustomEvent tồn tại nếu nó rất dễ dàng để đính kèm dữ liệu tùy chỉnh để đối tượng tổ chức sự kiện bình thường?

Answer 1

Nó không giống nhau. Bạn không thể thiết lập detail của một CustomEvent thực:

var event = new CustomEvent('myevent', {detail:123}); 
 
event.detail = 456; // Ignored in sloppy mode, throws in strict mode 
 
console.log(event.detail); // 123 
 

 
var event = new Event('myevent'); 
 
event.detail = 123; // It's not readonly 
 
event.detail = 456; 
 
console.log(event.detail); // 456

Có, bạn có thể sử dụng Object.defineProperty. Nhưng tôi đoán điểm là đối số của CustomEvent được cho là phải thiết lập một số dữ liệu nội bộ của sự kiện. Bây giờ nó chỉ xem xét detail, không được sử dụng trong nội bộ. Nhưng một đặc tả trong tương lai có thể thêm một cái gì đó mới, và sau đó bạn có thể không có khả năng thiết lập dữ liệu nội bộ đó bằng cách sử dụng các thuộc tính.

Một CustomEvent cũng kế thừa từ CustomElement.prototype. Điều đó chỉ thêm detail và không được chấp nhận initCustomEvent. Nhưng bạn có thể thêm các phương thức hoặc thuộc tính của riêng bạn vào đó, mà sẽ không được kế thừa bởi các sự kiện khác. Nhưng tôi không khuyên bạn nên điều này, bạn không nên sửa đổi các đối tượng bạn không sở hữu.

Vì vậy, về cơ bản bạn có thể sử dụng CustomEvent để phân loại sự kiện khác với các sự kiện khác. Xem đồ họa này từ một old spec