Как да проверя дали динамично прикачения слушател на събития съществува или не?

Няма начин да се провери дали динамично прикачените слушатели на събития съществуват или не.

Единственият начин, по който можете да видите дали е прикачен слушател на събития, е като прикачите слушатели на събития по следния начин:

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');
    });
}

Създаване на специален атрибут за елемент, когато слушателят е прикачен и след това проверка дали съществува.

Това, което бих направил, е да създам Boolean извън вашата функция, която започва като 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>

Въпреки че са изминали повече от 5 години, откакто OP публикува въпроса, вярвам, че хората, които се натъкнат на него в бъдеще, ще се възползват от този отговор, така че не се колебайте да правите предложения или подобрения в него. ????

Изглежда странно, че този метод не съществува. Време ли е да го добавите най-накрая?

Ако искаш, можеш да направиш нещо като следното:

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

Първо вижте елемента в раздела Инспектор в инструментите за разработчици. Това може да се направи:

• На страницата, като щракнете с десния бутон върху елемента на уеб страницата, който искате да проверите, и изберете „Проверка на елемент“ от менюто.
• В конзолата, като използвате функция за избиране на елемента, като например document.querySelector, и след това щракнете върху иконата до елемента, за да го видите в Инспектора< /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);
        }
    }
}