Nhận trình nghe sự kiện được đính kèm vào nút bằng addEventListener

Tôi đã xem những câu hỏi này:

• Làm cách nào để tìm trình xử lý sự kiện trên nút DOM khi gỡ lỗi hoặc từ mã JavaScript?
• tôi có thể lập trình kiểm tra và sửa đổi các trình xử lý sự kiện Javascript trên các phần tử html không?
• Cách gỡ lỗi liên kết sự kiện JavaScript / jQuery bằng Firebug (hoặc công cụ tương tự)

tuy nhiên không ai trong số họ trả lời làm thế nào để có được danh sách các trình nghe sự kiện được đính kèm vào một nút bằng cách sử dụng addEventListenermà không sửa đổi addEventListenernguyên mẫu trước khi các trình nghe sự kiện được tạo.

VisualEvent không hiển thị tất cả trình lắng nghe sự kiện (những ứng dụng cụ thể trên iPhone) và tôi muốn thực hiện điều này (phần nào) theo chương trình.

Chrome DevTools, Safari Inspector và Firebug hỗ trợ getEventListaries (nút) .

Bạn không thể.

Cách duy nhất để có được danh sách tất cả các trình nghe sự kiện được gắn vào một nút là chặn cuộc gọi tệp đính kèm của trình nghe.

DOM4 addEventListener

Nói

Nối bộ lắng nghe sự kiện vào danh sách được liên kết của bộ lắng nghe sự kiện với loại được đặt để nhập, bộ nghe được đặt thành bộ nghe và bộ thu thập để nắm bắt, trừ khi đã có một bộ nghe sự kiện trong danh sách đó với cùng loại, bộ nghe và chụp.

Có nghĩa là một người nghe sự kiện được thêm vào "danh sách người nghe sự kiện". Đó là tất cả. Không có khái niệm gì về danh sách này cũng như cách bạn nên truy cập nó.

Vì không có cách gốc nào để thực hiện việc này, đây là giải pháp ít xâm phạm hơn mà tôi tìm thấy (không thêm bất kỳ phương thức nguyên mẫu 'cũ' nào):

var ListenerTracker=new function(){
    var is_active=false;
    // listener tracking datas
    var _elements_  =[];
    var _listeners_ =[];
    this.init=function(){
        if(!is_active){//avoid duplicate call
            intercep_events_listeners();
        }
        is_active=true;
    };
    // register individual element an returns its corresponding listeners
    var register_element=function(element){
        if(_elements_.indexOf(element)==-1){
            // NB : split by useCapture to make listener easier to find when removing
            var elt_listeners=[{/*useCapture=false*/},{/*useCapture=true*/}];
            _elements_.push(element);
            _listeners_.push(elt_listeners);
        }
        return _listeners_[_elements_.indexOf(element)];
    };
    var intercep_events_listeners = function(){
        // backup overrided methods
        var _super_={
            "addEventListener"      : HTMLElement.prototype.addEventListener,
            "removeEventListener"   : HTMLElement.prototype.removeEventListener
        };

        Element.prototype["addEventListener"]=function(type, listener, useCapture){
            var listeners=register_element(this);
            // add event before to avoid registering if an error is thrown
            _super_["addEventListener"].apply(this,arguments);
            // adapt to 'elt_listeners' index
            useCapture=useCapture?1:0;

            if(!listeners[useCapture][type])listeners[useCapture][type]=[];
            listeners[useCapture][type].push(listener);
        };
        Element.prototype["removeEventListener"]=function(type, listener, useCapture){
            var listeners=register_element(this);
            // add event before to avoid registering if an error is thrown
            _super_["removeEventListener"].apply(this,arguments);
            // adapt to 'elt_listeners' index
            useCapture=useCapture?1:0;
            if(!listeners[useCapture][type])return;
            var lid = listeners[useCapture][type].indexOf(listener);
            if(lid>-1)listeners[useCapture][type].splice(lid,1);
        };
        Element.prototype["getEventListeners"]=function(type){
            var listeners=register_element(this);
            // convert to listener datas list
            var result=[];
            for(var useCapture=0,list;list=listeners[useCapture];useCapture++){
                if(typeof(type)=="string"){// filtered by type
                    if(list[type]){
                        for(var id in list[type]){
                            result.push({"type":type,"listener":list[type][id],"useCapture":!!useCapture});
                        }
                    }
                }else{// all
                    for(var _type in list){
                        for(var id in list[_type]){
                            result.push({"type":_type,"listener":list[_type][id],"useCapture":!!useCapture});
                        }
                    }
                }
            }
            return result;
        };
    };
}();
ListenerTracker.init();

Bạn có thể lấy tất cả các sự kiện jQuery bằng cách sử dụng $ ._ data ($ ('[selector]') [0], 'events'); thay đổi [bộ chọn] thành những gì bạn cần.

Có một plugin tập hợp tất cả các sự kiện được jQuery đính kèm được gọi là eventsReport.

Ngoài ra, tôi viết plugin của riêng mình để làm điều này với định dạng tốt hơn.

Nhưng dù sao thì có vẻ như chúng ta không thể thu thập các sự kiện được thêm bởi phương thức addEventListener. Có thể chúng ta có thể bọc lời gọi addEventListener để lưu trữ các sự kiện được thêm vào sau cuộc gọi bọc của chúng ta.

Có vẻ như đây là cách tốt nhất để xem các sự kiện được thêm vào một phần tử bằng các công cụ dành cho nhà phát triển.

Nhưng bạn sẽ không thấy các sự kiện được ủy quyền ở đó. Vì vậy, ở đó chúng ta cần jQuery eventReport.

CẬP NHẬT: BÂY GIỜ Chúng ta có thể thấy các sự kiện được thêm vào bằng phương pháp addEventListener XEM TRẢ LỜI ĐÚNG CHO CÂU HỎI NÀY.

Tôi không thể tìm thấy cách thực hiện điều này với mã, nhưng trong phiên bản Firefox 64, các sự kiện được liệt kê bên cạnh mỗi thực thể HTML trong Trình kiểm tra công cụ dành cho nhà phát triển như được lưu ý trên trang Trình xử lý sự kiện kiểm tra của MDN và như được minh họa trong hình ảnh này: