Как проверить, существует ли динамически прикрепленный прослушиватель событий?

Невозможно проверить, существуют ли динамически подключенные прослушиватели событий.

Единственный способ узнать, подключен ли прослушиватель событий, - это подключить такие прослушиватели событий:

elem.onclick = function () { console.log (1) }

Затем вы можете проверить, был ли прикреплен прослушиватель событий к onclick, вернув !!elem.onclick (или что-то подобное).

Я сделал что-то подобное:

const element = document.getElementById('div');

if (element.getAttribute('listener') !== 'true') {
     element.addEventListener('click', function (e) {
         const elementClicked = e.target;
         elementClicked.setAttribute('listener', 'true');
         console.log('event has been attached');
    });
}

Создание специального атрибута для элемента при присоединении слушателя с последующей проверкой его существования.

Я бы создал логическое значение вне вашей функции, которое начинается как FALSE и устанавливается в TRUE, когда вы присоединяете событие. Это послужит для вас своего рода флагом, прежде чем вы снова присоедините событие. Вот пример идеи.

// initial load
var attached = false;

// this will only execute code once
doSomething = function()
{
 if (!attached)
 {
  attached = true;
  //code
 }
} 

//attach your function with change event
window.onload = function()
{
 var txtbox = document.getElementById('textboxID');

 if (window.addEventListener)
 {
  txtbox.addEventListener('change', doSomething, false);
 }
 else if(window.attachEvent)
 {
  txtbox.attachEvent('onchange', doSomething);
 }
}

Возможный дубликат: Проверьте, есть ли у элемента есть прослушиватель событий. Нет jQuery. Здесь мой ответ.

В основном вот трюк для браузера Chromium (Chrome):

getEventListeners(document.querySelector('your-element-selector'));

tl; dr: нет, вы не можете сделать это каким-либо из изначально поддерживаемых способов.

Я знаю, что единственный способ добиться этого - создать пользовательский объект хранилища, в котором вы будете вести запись о добавленных слушателях. Что-то вроде следующего:

/* Create a storage object. */
var CustomEventStorage = [];

Шаг 1. Во-первых, вам понадобится функция, которая может перемещаться по объекту хранения и возвращать запись элемента, заданного элементом (или false).

/* The function that finds a record in the storage by a given element. */
function findRecordByElement (element) {
    /* Iterate over every entry in the storage object. */
    for (var index = 0, length = CustomEventStorage.length; index < length; index++) {
        /* Cache the record. */
        var record = CustomEventStorage[index];

        /* Check whether the given element exists. */
        if (element == record.element) {
            /* Return the record. */
            return record;
        }
    }

    /* Return false by default. */
    return false;
}

Шаг 2: Затем вам понадобится функция, которая может добавить прослушиватель событий, а также вставить прослушиватель в объект хранилища.

/* The function that adds an event listener, while storing it in the storage object. */
function insertListener (element, event, listener, options) {
    /* Use the element given to retrieve the record. */
    var record = findRecordByElement(element);

    /* Check whether any record was found. */
    if (record) {
        /* Normalise the event of the listeners object, in case it doesn't exist. */
        record.listeners[event] = record.listeners[event] || [];
    }
    else {
        /* Create an object to insert into the storage object. */
        record = {
            element: element,
            listeners: {}
        };

        /* Create an array for event in the record. */
        record.listeners[event] = [];

        /* Insert the record in the storage. */
        CustomEventStorage.push(record);
    }

    /* Insert the listener to the event array. */
    record.listeners[event].push(listener);

    /* Add the event listener to the element. */
    element.addEventListener(event, listener, options);
}

Шаг 3: Что касается фактических требований вашего вопроса, вам понадобится следующая функция, чтобы проверить, был ли элемент добавлен в прослушиватель событий для указанного события.

/* The function that checks whether an event listener is set for a given event. */
function listenerExists (element, event, listener) {
    /* Use the element given to retrieve the record. */
    var record = findRecordByElement(element);

    /* Check whether a record was found & if an event array exists for the given event. */
    if (record && event in record.listeners) {
        /* Return whether the given listener exists. */
        return !!~record.listeners[event].indexOf(listener);
    }

    /* Return false by default. */
    return false;
}

Шаг 4: Наконец, вам понадобится функция, которая может удалить прослушиватель из объекта хранилища.

/* The function that removes a listener from a given element & its storage record. */
function removeListener (element, event, listener, options) {
    /* Use the element given to retrieve the record. */
    var record = findRecordByElement(element);

    /* Check whether any record was found and, if found, whether the event exists. */
    if (record && event in record.listeners) {
        /* Cache the index of the listener inside the event array. */
        var index = record.listeners[event].indexOf(listener);

        /* Check whether listener is not -1. */
        if (~index) {
            /* Delete the listener from the event array. */
            record.listeners[event].splice(index, 1);
        }

        /* Check whether the event array is empty or not. */
        if (!record.listeners[event].length) {
            /* Delete the event array. */
            delete record.listeners[event];
        }
    }

    /* Add the event listener to the element. */
    element.removeEventListener(event, listener, options);
}

Фрагмент:

window.onload = function () {
  var
    /* Cache the test element. */
    element = document.getElementById("test"),

    /* Create an event listener. */
    listener = function (e) {
      console.log(e.type + "triggered!");
    };

  /* Insert the listener to the element. */
  insertListener(element, "mouseover", listener);

  /* Log whether the listener exists. */
  console.log(listenerExists(element, "mouseover", listener));

  /* Remove the listener from the element. */
  removeListener(element, "mouseover", listener);

  /* Log whether the listener exists. */
  console.log(listenerExists(element, "mouseover", listener));
};

<!-- Include the Custom Event Storage file -->
<script src = "https://cdn.rawgit.com/angelpolitis/custom-event-storage/master/main.js"></script>

<!-- A Test HTML element -->
<div id = "test" style = "background:#000; height:50px; width: 50px"></div>

Хотя с тех пор, как OP опубликовал вопрос, прошло более 5 лет, я считаю, что люди, которые натолкнутся на него в будущем, извлекут пользу из этого ответа, поэтому не стесняйтесь вносить предложения или улучшения. ????

Кажется странным, что такого метода не существует. Не пора ли его наконец добавить?

Если бы вы хотели, вы могли бы что-то вроде следующего:

var _addEventListener = EventTarget.prototype.addEventListener;
var _removeEventListener = EventTarget.prototype.removeEventListener;
EventTarget.prototype.events = {};
EventTarget.prototype.addEventListener = function(name, listener, etc) {
  var events = EventTarget.prototype.events;
  if (events[name] == null) {
    events[name] = [];
  }

  if (events[name].indexOf(listener) == -1) {
    events[name].push(listener);
  }

  _addEventListener(name, listener);
};
EventTarget.prototype.removeEventListener = function(name, listener) {
  var events = EventTarget.prototype.events;

  if (events[name] != null && events[name].indexOf(listener) != -1) {
    events[name].splice(events[name].indexOf(listener), 1);
  }

  _removeEventListener(name, listener);
};
EventTarget.prototype.hasEventListener = function(name) {
  var events = EventTarget.prototype.events;
  if (events[name] == null) {
    return false;
  }

  return events[name].length;
};

Вы всегда можете проверить вручную, существует ли ваш EventListener, например, с помощью инспектора Chrome. На вкладке «Элемент» есть традиционная вложенная вкладка «Стили» и рядом с ней еще одна: «Слушатели событий». Это даст вам список всех EventListeners с их связанными элементами.

Вот сценарий, который я использовал для проверки существования динамически прикрепленного прослушивателя событий. Я использовал jQuery, чтобы прикрепить обработчик событий к элементу, а затем инициировать это событие (в данном случае событие «щелчок»). Таким образом я могу извлекать и фиксировать свойства событий, которые будут существовать только в том случае, если обработчик событий прикреплен.

var eventHandlerType;

$('#contentDiv').on('click', clickEventHandler).triggerHandler('click');

function clickEventHandler(e) {
    eventHandlerType = e.type;
}

if (eventHandlerType === 'click') {
    console.log('EventHandler "click" has been applied');
}

Похоже, что не существует кроссбраузерной функции, которая ищет события, зарегистрированные для данного элемента.

Однако можно просмотреть функции обратного вызова для элементов в некоторых браузерах, используя их инструменты разработки. Это может быть полезно при попытке определить, как работает веб-страница, или для отладки кода.

Firefox

Сначала просмотрите элемент на вкладке Inspector в инструментах разработчика. Это можно сделать:

• На странице, щелкнув правой кнопкой мыши элемент на веб-странице, который вы хотите проверить, и выбрав «Проверить элемент» в меню.
• В консоли, используя функцию для выбора элемента, например document.querySelector, а затем щелкнув значок рядом с элементом, чтобы просмотреть его в Inspector < / em> таб.

var elems = document.querySelectorAll('*');

for (var i=0; i <= elems.length; i++) {
    var listeners = getEventListeners(elems[i]);

    if (Object.keys(listeners).length < 1) {
        continue;
    }

    console.log(elems[i]);

    for (var j in listeners) {
        console.log('Event: '+j);

        for (var k=0; k < listeners[j].length; k++) {
            console.log(listeners[j][k].listener);
        }
    }
}