Как проверить, существует ли динамически подключаемый слушатель событий или нет?
Вот моя проблема: можно ли как-то проверить существование динамически подключенного слушателя событий? Или как я могу проверить состояние свойства "onclick" (?) в DOM? Я искал решение в интернете, как и в Stack Overflow, но безуспешно. Вот мой html:
<a id="link1" onclick="linkclick(event)"> link 1 </a>
<a id="link2"> link 2 </a> <!-- without inline onclick handler -->Затем в Javascript я прикрепляю динамически созданный слушатель событий ко второй ссылке:
document.getElementById('link2').addEventListener('click', linkclick, false);Код работает хорошо, но все мои попытки обнаружить этот прикрепленный слушатель терпят неудачу:
// test for #link2 - dynamically created eventlistener
alert(elem.onclick); // null
alert(elem.hasAttribute('onclick')); // false
alert(elem.click); // function click(){[native code]} // btw, what's this?jsFiddle здесь. Если нажать "Добавить onclick для 2", а затем "[ссылка 2]", событие срабатывает нормально, но "Тестовая ссылка 2" всегда сообщает false. Кто-нибудь может помочь?
Не существует способа проверить, существуют ли динамически подключаемые слушатели событий или нет.
Единственный способ проверить, прикреплен ли слушатель событий, - это прикрепить слушателей событий следующим образом:
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);
}
}
сюжет: нет, вы не можете сделать это в любое поддерживаемых пути.
Единственный способ я знаю, чтобы достичь этого может быть создание пользовательского объекта хранения, где вы храните записи слушателей добавил. Что-то по следующим направлениям:
/* 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>в
Although более 5 лет прошло с момента ОП запостил вопрос, я считаю, что люди, которые наткнуться на это в будущем принесет большую пользу от этого ответа, так что не стесняйтесь, чтобы сделать предложения или улучшений к нему. 😊
Вы всегда можете проверить вручную, если существуют для EventListener, используя например инспектор кром. В разделе элемент у вас есть традиционные и"стили" на вкладке и близко к нему еще один : "у слушателей событий". Что даст вам список всех самое eventlisteners с их взаимосвязанных элементов.
Возможные дубликаты: https://stackoverflow.com/questions/28056716/check-if-an-element-has-event-listener-on-it-no-jquery/41137585. Пожалуйста, найдите мой ответ.
В основном здесь находится фишка для Хрома (хром) браузер:
getEventListeners(document.querySelector('your-element-selector'));
Вот сценарий, который я использовал для проверки существования динамически подключаемого слушателя событий. Я использовал 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');
}
Кажется странным, что этот метод не'т существуют. Не пора ли добавить его, наконец?
Если вы хотели вы могли бы что-то вроде следующего (непроверенных):
var _addEventListener = EventTarget.prototype.addEventListener;
var _removeEventListener = EventTarget.prototype.removeEventListener;
EventTarget.prototype.events = {};
EventTarget.prototype.addEventListener = function(name, function, etc) {
var events = EventTarget.prototype.events;
if (events[name]==null) {
events[name] = [];
}
if (events[name].indexOf(function)==-1) {
events[name].push(function);
}
_addEventListener(name, function);
}
EventTarget.prototype.removeEventListener = function(name) {
var events = EventTarget.prototype.events;
if (events[name]!=null && events[name].indexOf(function)!=-1) {
events[name].splice(events[name].indexOf(function), 1);
}
_removeEventListener(name, function);
}
EventTarget.prototype.hasEventListener = function(name) {
var events = EventTarget.prototype.events;
if (events[name]==null) {
return false;
}
return events[name].length);
}
Просто удалить событие, прежде чем добавить :
document.getElementById('link2').removeEventListener('click', linkclick, false);
document.getElementById('link2').addEventListener('click', linkclick, false);
Я просто написал скрипт, который позволит вам достигнуть этого. Это дает вам две глобальные функции: hasEvent(узла эум, строка события) " и " getEvents(узла эум), которые вы можете использовать. Следует помнить, что он изменяетeventtarget из методапрототипдобавить/метода removeeventlistener, а не работает для событий добавлено через разметку HTML или JavaScript синтаксис из вяза.on_event = ...`
Автор сценария:
var hasEvent,getEvents;!function(){function b(a,b,c){c?a.dataset.events+=","+b:a.dataset.events=a.dataset.events.replace(new RegExp(b),"")}function c(a,c){var d=EventTarget.prototype[a+"EventListener"];return function(a,e,f,g,h){this.dataset.events||(this.dataset.events="");var i=hasEvent(this,a);return c&&i||!c&&!i?(h&&h(),!1):(d.call(this,a,e,f),b(this,a,c),g&&g(),!0)}}hasEvent=function(a,b){var c=a.dataset.events;return c?new RegExp(b).test(c):!1},getEvents=function(a){return a.dataset.events.replace(/(^,+)|(,+$)/g,"").split(",").filter(function(a){return""!==a})},EventTarget.prototype.addEventListener=c("add",!0),EventTarget.prototype.removeEventListener=c("remove",!1)}();
Там ничего'т, кажется, чтобы быть кросс-браузер, который ищет событий, зарегистрированных в указанный элемент.
Однако, можно просмотреть перезвонить функции для элементов в некоторых браузерах с помощью их инструментов развития. Это может быть полезно, когда пытаются определить, как функции веб-страницы или для отладки кода.
Для Firefox
Во-первых, вид элемента в Инспектор вкладка в "инструменты разработчика". Это может быть сделано:
- На странице щелкните правой кнопкой мыши на элемент на веб-странице, который вы хотите проверить и выберите "и проверить элемент" из меню.
- Консоли с помощью функции выбора элементов, таких как документ.querySelector, а затем щелкните значок рядом с элементом, чтобы посмотреть его в Инспектор вкладка.
Если какие-либо события были зарегистрированы в элемент, вы увидите кнопку содержащих слово события рядом с элементом. Нажатие на нее позволит вам увидеть события, которые были зарегистрированы с элементом. Нажав на стрелку рядом событий позволяет просматривать функция обратного вызова для этого.
Хром
Во-первых, вид элемента элементы вкладку в инструменты разработчика. Это может быть сделано:
- На странице щелкните правой кнопкой мыши на элемент на веб-странице, который вы хотите проверить и выберите и"Проверить" из меню
- Консоли с помощью функции выбора элементов, таких как документ.querySelector, щелкните правой кнопкой мыши на элементе и выбрав "и раскрыть в панели элементов", чтобы посмотреть его в Инспектор вкладка.
Рядом в разделе окна, которое показывает дерево, содержащее элементы веб-страницы, там должен быть еще один раздел со вкладки под названием "и прослушивателей событий на". Выберите его, чтобы увидеть события, которые были зарегистрированы на элемент. Чтобы увидеть код для данного события, щелкните ссылку справа от него.
В Chrome, событий для элемента можно также найти с помощью getEventListeners функция. Однако, исходя из моих тестов, getEventListeners функция не'т список событий, когда несколько элементов передаются ей. Если вы хотите, чтобы найти все элементы на странице, которые слушатели и вид функции обратного вызова для этих слушателей, вы можете использовать следующий код в консоли для этого:
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);
}
}
}Пожалуйста, редактировать этот ответ, если вы знаете, способов сделать это в данный браузерах или в других браузерах.
Если я правильно понял, вы можете только проверить если слушатель был проверен, но не слушатель ведущий специально.
Таким образом, некоторые специальный код позволит восполнить пробел, чтобы обработать ваш поток кодирования. Практическим методом было бы создавать "государство", используя переменные. Например, прикрепить слушатель'ы шашку следующим образом:
var listenerPresent=falseзатем, если вы установите слушатель просто изменить значение:
listenerPresent=trueзатем внутри вашего для EventListener 'с обратного вызова можно назначить определенные функции внутри и таким же образом, распределить доступ к функциям в зависимости от какого-либо государства в качестве переменной, например:
accessFirstFunctionality=false
accessSecondFunctionality=true
accessThirdFunctionality=true
Я только что узнал, пытаясь увидеть, если мой событие был прикреплен....
если вы делаете :
item.onclickон вернется на "нуль"и
но если вы делаете:
item.hasOwnProperty('onclick')тогда это есть "Правда"и
поэтому я думаю, что когда вы используете "от метода addEventListener", чтобы добавить обработчики событий, единственный способ получить доступ к это через я;метод hasOwnProperty " и;. Хотел бы я знать, почему или как, но увы, после исследования, я не'т нашли объяснение.
