Как проверить в JS-коде, есть ли на элементе обработчик onclick?

#javascript #javascript_events

Как узнать через нативный JS есть ли на элементе нужный обработчик? В т.ч. которые
вешаются динамически после стартовой загрузки страницы.

P.S. Пока есть только идея при добавлении обработчика записывать в массив на какой
элемент какой обработчик повесили. После чего проверять наличие обработчика по этому
массиву. Но это не очень элегантный способ в плане реализации, может кто знает лучше?
    

Ответы

Ответ 1

К сожалению, нет стандартного апи, для получения списка всех обработчиков из кода.

1 вариант:
Через консоль, тот же хром предоставляет апи getEventListeners

window.getEventListeners(button);


2 вариант
Если обработчик добавлен напрямую через on{event}, то можно попробовать проверить,
является ли нужное св-во функцией

typeof button.onclick === "function"


3 вариант ( которого нет )
Если событие добавлено через addEventListener, то тут все еще хуже. Потому что отследить
такой момент вроде как не возможно. Вы можете переписать стандартную функцию addEventListener,
что бы при вызове элемент и событие добавлялся в массив, откуда потом можно достать
данные ( по сути getEventListeners возвращает примерно такой же объект )



const eventListeners = new Map();
EventTarget.prototype.addEventListener_ = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function (eventName, fn) {
  let event = eventListeners.get(this);
  if(!event) {
    event = {}
  }
  let eventData = event[eventName];
  if(!eventData) {
      eventData = [{listener: fn}];
  } else {
      eventData.push({listener: fn});
  }
  
  event[eventName] = eventData;
  eventListeners.set(this, event);
  EventTarget.prototype.addEventListener_.call(this, eventName, fn);
}

const button = document.querySelector('input');
button.addEventListener('click', e => {
  alert('click');
  showListeners(button);
});

// можем посмотреть обработчики в eventListeners
const showListeners = node => {
  if(!eventListeners.has(node)) return null;
  
  const events = eventListeners.get(node);
  Object.keys(events).forEach(e => {
    console.log(`event ${e} has length ${events[e].length}`);
  });
}