Chụp tất cả các sự kiện (javascript)

Question

Tôi muốn có thể chụp tất cả các sự kiện vừa được tạo vừa gửi đi và kích hoạt một số cuộc gọi lại khi điều đó xảy ra.

Ngoài ra, tôi muốn có thể kích hoạt cuộc gọi lại bất kỳ lúc nào một sự kiện được ghép nối với trình xử lý sự kiện.

Sự cố bao gồm: các yếu tố được thêm động, các sự kiện có tính năng lan truyền hoặc bong bóng bị chặn và các sự kiện tùy chỉnh được tạo động. Tôi tưởng tượng rằng sẽ cần phải có một mẫu thử của dispatchEvent hoặc một cái gì đó, nhưng tôi không chắc chắn. Điều này thậm chí có thể?

Answer 1

Một số vấn đề cơ bản sự kiện:

1. Các sự kiện được gửi đi "trên" một đối tượng DOM (thường là một yếu tố) mà là mục tiêu của sự kiện.
2. Sự kiện trước tiên có thể truyền xuống thành phần con trong giai đoạn bắt giữ. Giai đoạn này hiếm khi được sử dụng vì nó không được hỗ trợ bởi một số trình duyệt được sử dụng rộng rãi cho đến gần đây.
3. Sự kiện có thể lan truyền lần hai lên các phần tử gốc trong pha sủi bọt. Giai đoạn này thường được sử dụng.
4. Một số sự kiện không phổ biến, chúng không có giai đoạn chụp hoặc bong bóng (ví dụ: lấy nét, làm mờ và gửi sự kiện). Một số sự kiện tuyên truyền trong một số trình duyệt không truyền bá ở những trình duyệt khác.
5. Phần tử DOM phản hồi sự kiện có trình xử lý sự kiện. Nó có thể được thiết lập để lắng nghe các sự kiện cụ thể và gọi một hàm listener khi sự kiện đó đến được phần tử, hoặc trong quá trình capture, bubbling hoặc nếu phần tử là một mục tiêu sự kiện.
6. Người nghe có thể hủy tuyên truyền, ví dụ: sự kiện nhấp chuột trên một khoảng thời gian bên trong liên kết có thể hủy tuyên truyền để liên kết không nhận được cú nhấp chuột

Với điều trên, không thể thực hiện "chụp tất cả sự kiện" bằng cách sử dụng Events API. Nó sẽ yêu cầu thiết lập một người nghe cho mọi loại sự kiện trên mọi phần tử và không thể nắm bắt các sự kiện tùy chỉnh vì bạn phải biết về chúng để thiết lập một người nghe thích hợp.

Tôi tưởng tượng thì sẽ cần phải là một mẫu của dispatchEvent hoặc một cái gì đó

dispatchEvent là một phương pháp của một thể tổ chức sự kiện, nó không định trở thành một nhà xây dựng (không có yêu cầu cho nó để có phương thức nội bộ [[Construct]]) nên không thực tế để sử dụng như vậy. Trình duyệt không bắt buộc phải triển khai kế thừa nguyên mẫu cho các đối tượng lưu trữ (mặc dù hầu hết là làm), và các chi tiết thực hiện của các đối tượng và phương thức host chủ yếu bị ẩn, vì vậy đây không phải là một tùy chọn.

Bạn có thể thử mở rộng API sự kiện, nhưng bạn thực sự should not mess with host objects.

Dường như bạn quan tâm đến các yếu tố được thêm động. Có một chiến lược được gọi là "event delegation", nơi bạn thực hiện các sự kiện bạn cần lắng nghe, sau đó thiết lập người nghe gần với mục tiêu sự kiện như bạn có thể trên phần tử không thay đổi (ví dụ: phần tử bảng nếu bạn đang thêm động và xóa các hàng trong bảng hoặc div vùng chứa cho các phần tử khác) cho các loại sự kiện cụ thể mà bạn cần phản hồi.

Bạn cũng có thể có các chức năng đang sửa đổi sự kiện tùy chỉnh công văn DOM để thêm người nghe hoặc bất kỳ điều gì.

Answer 2

Nếu bạn thực sự muốn thực hiện việc này, bạn có thể ghi đè addEventListener để theo dõi các sự kiện được đăng ký và kích hoạt.

var myEventManager = (function() { 
    var old = EventTarget.prototype.addEventListener, 
     listeners = [], 
     events = []; 

    EventTarget.prototype.addEventListener = function(type, listener) { 

     function new_listener(listener) { 
      return function(e) { 
       events.push(e);     // remember event 
       return listener.call(this, e); // call original listener 
      }; 
     } 

     listeners.push([type, listener]);  // remember call 
     return old.call(this, type, new_listener(listener)); // call original 
    }; 

    return { 
     get_events: function() { return events; }, 
     get_listeners: function() {return listeners; } 
    }; 

}()); 

Tuy nhiên, có những lý do không đếm được không để làm điều này, không kém phần quan thực tế là bạn sẽ nhanh chóng chạy ra khỏi bộ nhớ khi bạn ghi lại hàng ngàn sự kiện như di chuyển chuột. Điều này cũng sẽ không ghi lại các trình nghe sự kiện được đặt theo các cách như elt.onclick. Dĩ nhiên, nó cũng sẽ không khiến người nghe được thiết lập thông qua API IE attachEvent cũ. Quan trọng nhất, nó sẽ không giúp bạn với các sự kiện được tạo ra và lắng nghe nội bộ, chẳng hạn như một cú click chuột vào một hộp kiểm. (Một giải pháp hoàn chỉnh cũng sẽ yêu cầu xử lý removeEventListener.)

Bạn cũng có thể ghi đè createEvent và dispatch theo cách tương tự, nhưng lại chỉ ghi lại các sự kiện được tạo hoặc gửi đi rõ ràng trong mã JS.

Nếu bạn thực sự muốn làm những gì bạn mong muốn, tôi đoán bạn cần phải ngã ba Chrome.