รับฟังเหตุการณ์ที่แนบมากับโหนดโดยใช้ addEventListener

ฉันได้ดูคำถามเหล่านี้แล้ว:

• จะค้นหาตัวฟังเหตุการณ์บนโหนด DOM เมื่อทำการดีบักหรือจากโค้ด JavaScript ได้อย่างไร
• ฉันสามารถตรวจสอบและแก้ไขตัวจัดการเหตุการณ์ Javascript บนองค์ประกอบ html โดยทางโปรแกรมได้หรือไม่
• วิธีดีบักการผูกเหตุการณ์ JavaScript / jQuery ด้วย Firebug (หรือเครื่องมือที่คล้ายกัน)

อย่างไรก็ตามไม่มีใครตอบได้ว่าจะรับรายชื่อผู้ฟังเหตุการณ์ที่เชื่อมต่อกับโหนดได้addEventListenerอย่างไรโดยไม่ต้องแก้ไขaddEventListenerต้นแบบก่อนที่จะสร้างตัวฟังเหตุการณ์

VisualEventไม่แสดงตัวฟังเหตุการณ์ทั้งหมด (เฉพาะสำหรับ iPhone) และฉันต้องการทำสิ่งนี้ (ค่อนข้าง) โดยใช้โปรแกรม

โครเมี่ยม DevTools, Safari และสารวัตร Firebug สนับสนุนgetEventListeners (โหนด)

คุณทำไม่ได้

วิธีเดียวที่จะรับรายชื่อผู้ฟังเหตุการณ์ทั้งหมดที่เชื่อมต่อกับโหนดคือการดักฟังการเรียกสิ่งที่แนบมาของผู้ฟัง

DOM4 addEventListener

กล่าวว่า

ผนวกตัวฟังเหตุการณ์เข้ากับรายชื่อผู้ฟังเหตุการณ์ที่เกี่ยวข้องโดยตั้งค่าประเภทเป็นประเภทผู้ฟังตั้งค่าเป็นผู้ฟังและตั้งค่าการจับภาพเพื่อจับภาพเว้นแต่จะมีผู้ฟังเหตุการณ์อยู่ในรายการที่เป็นประเภทเดียวกันผู้ฟังและการบันทึก

หมายความว่ามีการเพิ่มผู้ฟังเหตุการณ์ใน "รายชื่อผู้ฟังเหตุการณ์" นั่นคือทั้งหมด ไม่มีความคิดว่ารายการนี้ควรเป็นอย่างไรและคุณควรเข้าถึงได้อย่างไร

เนื่องจากไม่มีวิธีดั้งเดิมในการทำสิ่งนี้นี่คือวิธีแก้ปัญหาที่ล่วงล้ำน้อยกว่าที่ฉันพบ (อย่าเพิ่มวิธีต้นแบบ 'เก่า'):

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();

คุณสามารถรับเหตุการณ์ jQuery ทั้งหมดโดยใช้ $ ._ data ($ ('[selector]') [0], 'events'); เปลี่ยน [ตัวเลือก] ตามที่คุณต้องการ

มีปลั๊กอินที่รวบรวมเหตุการณ์ทั้งหมดที่แนบมาโดย jQuery เรียกว่า eventsReport

นอกจากนี้ฉันยังเขียนปลั๊กอินของตัวเองซึ่งทำได้ด้วยการจัดรูปแบบที่ดีกว่า

แต่อย่างไรก็ตามดูเหมือนว่าเราไม่สามารถรวบรวมเหตุการณ์ที่เพิ่มโดยวิธี addEventListener ได้ อาจเป็นไปได้ว่าเราสามารถตัดการเรียก addEventListener เพื่อจัดเก็บกิจกรรมที่เพิ่มหลังจากการโทรสรุปของเรา

ดูเหมือนเป็นวิธีที่ดีที่สุดในการดูเหตุการณ์ที่เพิ่มลงในองค์ประกอบด้วยเครื่องมือ dev

แต่คุณจะไม่เห็นกิจกรรมที่ได้รับมอบหมายที่นั่น ดังนั้นเราจึงต้องการ jQuery eventsReport

อัปเดต: ตอนนี้เราสามารถเห็นเหตุการณ์ที่เพิ่มโดยเมธอด addEventListener ดูคำตอบที่ถูกต้องสำหรับคำถามนี้

ฉันไม่สามารถหาวิธีดำเนินการกับโค้ดได้ แต่ในสต็อก Firefox 64 เหตุการณ์จะแสดงรายการถัดจากเอนทิตี HTML แต่ละรายการในตัวตรวจสอบเครื่องมือสำหรับนักพัฒนาตามที่ระบุไว้ในหน้าตรวจสอบผู้ฟังเหตุการณ์ของ MDN และดังที่แสดงในภาพนี้: