Có thể gửi các sự kiện trên các đối tượng thông thường (không phải các đối tượng DOM) không?

Question

Tôi vừa phát hiện ra rằng FileReader gửi các sự kiện giống như thể nó là một phần tử DOM. Là nó? Tôi tự hỏi nếu nó có thể tạo ra một đối tượng tương tự như FileReader, mà không có một đại diện trong cấu trúc HTML/XML, nhưng có thể gửi các sự kiện?

Answer 1

FileReader có phương pháp như addEventHandler vì nó là defined để thực hiện các giao diện EventTarget. EventTarget được xác định bởi thông số DOM Events nhưng bạn không cần phải là đối tượng DOM để triển khai. window, XMLHttpRequest và FileReader là các đối tượng Mô hình đối tượng trình duyệt khác triển khai EventTarget. Không may là không có cách nào dễ dàng để thực hiện các mục tiêu sự kiện của trình duyệt ... bạn có thể thử kế thừa từ đối tượng trình duyệt bằng cách sử dụng một thuộc tính prototype, nhưng điều đó không đáng tin cậy nói chung. Tuy nhiên, không quá khó để viết mã để tự mình triển khai tất cả các phương thức trong JavaScript đơn giản:

function CustomEventTarget() { this._init(); } 

CustomEventTarget.prototype._init= function() { 
    this._registrations= {}; 
}; 
CustomEventTarget.prototype._getListeners= function(type, useCapture) { 
    var captype= (useCapture? '1' : '0')+type; 
    if (!(captype in this._registrations)) 
     this._registrations[captype]= []; 
    return this._registrations[captype]; 
}; 

CustomEventTarget.prototype.addEventListener= function(type, listener, useCapture) { 
    var listeners= this._getListeners(type, useCapture); 
    var ix= listeners.indexOf(listener); 
    if (ix===-1) 
     listeners.push(listener); 
}; 

CustomEventTarget.prototype.removeEventListener= function(type, listener, useCapture) { 
    var listeners= this._getListeners(type, useCapture); 
    var ix= listeners.indexOf(listener); 
    if (ix!==-1) 
     listeners.splice(ix, 1); 
}; 

CustomEventTarget.prototype.dispatchEvent= function(evt) { 
    var listeners= this._getListeners(evt.type, false).slice(); 
    for (var i= 0; i<listeners.length; i++) 
     listeners[i].call(this, evt); 
    return !evt.defaultPrevented; 
}; 

Thận trọng: mã trên nằm ngoài đầu và chưa được kiểm tra, nhưng có thể hoạt động. Tuy nhiên, nó có những hạn chế như chỉ hỗ trợ giá trị trả về dispatchEvent nếu đối tượng Event hỗ trợ thuộc tính DOM Cấp 3 defaultPrevented và không hỗ trợ DOM Cấp 3 stopImmediatePropagation() (không thể triển khai trừ khi bạn dựa vào đối tượng Sự kiện của riêng mình để hiển thị thuộc tính cho nó). Ngoài ra không có triển khai thực hiện phân cấp hoặc chụp/bong bóng.

Vì vậy, IMO: bạn không đạt được nhiều bằng cách cố gắng viết mã tham gia vào mô hình Sự kiện DOM. Đối với công việc gọi lại plain-JS, tôi chỉ cần thực hiện việc tạo danh sách listener của riêng bạn.

Answer 2

Tôi cho rằng đó là javascript; thông thường bất kỳ đối tượng nào có thể lấy tham chiếu đến phần tử DOM sẽ có thể gửi một sự kiện bằng hàm element.dispatchEvent; xem:

https://developer.mozilla.org/en/DOM/document.createEvent

https://developer.mozilla.org/en/DOM/element.dispatchEvent

Answer 3

bobince has the right idea, nhưng mã của anh ấy chỉ là một ví dụ. Để thực hiện thử nghiệm chiến đấu thực tế, Mr. Doob has one that he uses in three.js.

Answer 4

jQuery có thể gửi các sự kiện từ các đối tượng thông thường. Here's a fiddle.

function MyClass() { 
    $(this).on("MyEvent", function(event) { 
     console.log(event); 
    }); 

    $(this).trigger("MyEvent"); 
} 

var instance = new MyClass();