5

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

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

1
  • Да вроде никак...
    – Qwertiy
    29 авг 2018 в 11:33

1 ответ 1

2

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

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}`);
  });
}
<input type='button' value='Click' id='button'>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.