Get all listening events in the element

stay Chrome DevTools Command line API Provides a variety of ways to observe and check event listeners .
for instance getEventListeners Method , You can get all the listeners on the element , But these methods can only be used in chrome Use in debugging , Can't be in js Use in .

If we want to js Use in , You can modify addEventListener and removeEventListener.

Use call Method replication method

const addEventListener = document.addEventListener;
document.addEventListener = function () {
    
  console.log('rewrite addEventListener')
  addEventListener.call(document, arguments[0], arguments[1]);
};

You can call addEventListener Record the event on the corresponding element . In fact, you are adding an attribute to the element to record all events , Then expose some methods to access these events .

Add attribute

Create an object , Used to save events and methods .

class BaseEvent {
    
  constructor(ele) {
    
    this.element = ele;
    this._events = {
    };
    //  Replication method 
    this.rewriteAddEventListener();
    this.rewriteRemoveEventListener();
    //  Bind methods to elements , That is, it can be done through document.fn Visit 
    ele.getAllEventListeners = this.getAllEventListeners.bind(this);
    ele.getAllEvents = this.getAllEvents.bind(this);
  }
  rewriteAddEventListener() {
    
    const addEventListener = this.element.addEventListener;
    const _ = this;
    this.element.addEventListener = function () {
    
      _.addEvent(arguments[0], arguments[1]);
      addEventListener.call(_.element, arguments[0], arguments[1]);
    };
  }
  rewriteRemoveEventListener() {
    
    const removeEventlistener = this.element.removeEventListener;
    const _ = this;
    this.element.removeEventListener = function () {
    
      _.removeEvent(arguments[0]);
      removeEventlistener.call(_.element, arguments[0], arguments[1]);
    };
  }
  addEvent(eventName, callback) {
    
    if (this._events[eventName]) {
    
      this._events[eventName].push(callback);
    } else {
    
      this._events[eventName] = [callback];
    }
  }
  removeEvent(eventName) {
    
    delete this._events[eventName];
  }
  getAllEvents() {
    
    return Object.getOwnPropertyNames(this._events);
  }
  getAllEventListeners() {
    
    return this._events;
  }
}

Use ：

document._extends = new BaseEvent(document);
document.getAllEventListeners()

Copy the method to get the element

Some people may think that the above one has to new One BaseEvent Can be used more cumbersome . So is there any other simpler way . Let's imagine how we get the corresponding elements ？ It's through the methods on the browser （getElementById etc. ）, Let's just copy these methods , Each time we get the corresponding elements, we add a BaseEvent example , In this way, you can use the elements directly after you get them .

function extendElement(ele) {
    
  if (!ele) {
    
    return null;
  }
  if (!ele._extends) {
    
    ele._extends = new BaseEvent(ele);
    return ele;
  }
}

const getElementById = document.getElementById;
document.getElementById = function () {
    
  const elem = getElementById.call(document, arguments[0]);
  return extendElement(elem);
};

about getElementById、querySelector for , All you get is a single element , It's easy to deal with . But for others API Speaking of , Get an array of elements , This requires additional processing .

const getElementsByTagName = document.getElementsByTagName;
document.getElementsByTagName = function () {
    
  const elem = getElementsByTagName.call(document, arguments[0]);
  if (!elem) {
    
    return new HTMLAllCollection();
  }
  return proxyObject(elem);
};

function proxyObject(obj) {
    
  const hanlder = {
    
    get: (obj, prop) => {
    
      return extendElement(obj[prop]);
    }
  }
  const proxyObject = new Proxy(obj, hanlder);
  return proxyObject;
}

use Proxy The proxy intercepts access to the array , Add the previous one when accessing the specific element BaseEvent.

Listen for assignment events

about document.onclick = function(){} These events , The processing here is to listen to these events , When an event is assigned , Use addEventListener monitor . When document.onclick = null Cancel listening to this event when .

observeAssignmentEvent() {
    
  const _ = this;
  eventList.forEach((item) => {
    
    Object.defineProperty(_.element, `on${
      item}`, {
    
      set(fn) {
    
        let i =  _.isAlreadyListenedByAssignment(item);
        if(fn) {
    
          if( i !== -1) {
    
            _.element.removeEventListener(item, _._events[item][i])
          }
          _.element.addEventListener(item, {
    value: fn, intro: 'add by assignment'});
            return;
          }
          if(i !== -1) {
    
            _.element.removeEventListener(item, _._events[item][i])
          }
        }
      })
   })
 }
isAlreadyListenedByAssignment(item) {
    
  if(!this._events[item] || this._events[item].length === 0) {
    
    return -1;
  }
  let idx = -1;
  this._events[item].forEach((item, i) => {
    
    if(typeof item === 'object') {
    
      if(item.intro === 'add by assignment') {
    
        idx = i;
        return;
      }
    }
  })
  return idx;
}

other API It's all similar , I won't introduce them here .
Specific code can be viewed https://github.com/leopord-lau/eevent

Use

Install in the project eevent:

npm i eevent

Introduce in the project import 'eevent' That's all right. .