Вот моя проблема: возможно ли как-то проверить наличие динамически подключенного прослушивателя событий? Или как я могу проверить состояние свойства onclick (?) В DOM? Я искал интернет, как и Qaru, для решения, но не повезло. Вот мой HTML:
<a id="link1" onclick="linkclick(event)"> link 1 </a>
<a id="link2"> link 2 </a> <!-- without inline onclick handler -->
Затем в Javascript я присоединяю динамически созданный прослушиватель событий ко 2-й ссылке:
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 this?
jsFiddle здесь. Если вы нажмете "Добавить onclick for 2", а затем "[ссылка 2]", событие срабатывает хорошо, но "Тестовая ссылка 2" всегда сообщает ложь. Может кто-нибудь помочь?
Невозможно проверить, существуют ли динамически подключенные прослушиватели событий.
Единственный способ узнать, подключен ли прослушиватель событий, - это добавить прослушиватели событий следующим образом:
elem.onclick = function () { console.log (1) }
Затем вы можете проверить, подключен ли прослушиватель событий к onclick, возвращая !!elem.onclick (или что-то подобное).
Что бы я сделал, так это создать логическое значение вне вашей функции, которое начинается с 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);
}
}
Я сделал что-то вроде этого:
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');
});
}
Создание специального атрибута для элемента при подключении слушателя, а затем проверки его наличия.
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>Вы всегда можете проверить вручную, если ваш EventListener существует, например, с помощью инспектора Chrome. На вкладке Элемент у вас есть традиционная подкладка "Стили", а рядом с ней - "Слушатели событий". Это даст вам список всех EventListeners со связанными элементами.
Здесь a script я использовал для проверки наличия динамически подключенного прослушивателя событий. Я использовал jQuery для присоединения обработчика события к элементу, а затем инициировал это событие (в данном случае событие 'click'). Таким образом, я могу получить и захватить свойства событий, которые будут существовать только при подключении обработчика событий.
var eventHandlerType;
$('#contentDiv').on('click', clickEventHandler).triggerHandler('click');
function clickEventHandler(e) {
eventHandlerType = e.type;
}
if (eventHandlerType === 'click') {
console.log('EventHandler "click" has been applied');
}
Возможный дубликат: Проверьте, есть ли у элемента прослушиватель событий. нет JQuery. Пожалуйста, найдите мой ответ там.
Вот трюк для браузера Chromium (Chrome):
getEventListeners(document.querySelector('your-element-selector'));
Я только что написал script, который позволяет вам это сделать. Он дает вам две глобальные функции: hasEvent(Node elm, String event) и getEvents(Node elm), которые вы можете использовать. Имейте в виду, что он изменяет метод прототипа EventTarget add/RemoveEventListener и не работает для событий, добавленных через разметку HTML или синтаксис javascript elm.on_event = ...
Дополнительная информация в GitHub
Script:
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
Сначала просмотрите элемент на вкладке "Инспектор" в инструментах разработчика. Это можно сделать:
Если какие-либо события были зарегистрированы в элементе, вы увидите кнопку, содержащую слово Event рядом с элементом. Нажав на нее, вы увидите события, которые были зарегистрированы с помощью элемента. Нажав на стрелку рядом с событием, вы можете просмотреть функцию обратного вызова для него.
Chrome
Сначала просмотрите элемент на вкладке "Элементы" в инструментах разработчика. Это можно сделать:
Рядом с разделом окна, в котором отображается дерево, содержащее элементы веб-страницы, должен быть еще один раздел с вкладкой, озаглавленной "Прослушиватели событий". Выберите его, чтобы увидеть события, которые были зарегистрированы для элемента. Чтобы просмотреть код для данного события, нажмите ссылку справа от него.
В 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);
}
}
}
Пожалуйста, измените этот ответ, если вы знаете способы сделать это в указанных браузерах или в других браузерах.
Если я хорошо понимаю, вы можете только проверить, проверен ли слушатель, а не какой конкретно слушатель является докладчиком.
Так что некоторый специальный код заполнит пробел для обработки вашего потока кодирования. Практическим методом было бы создать state с использованием переменных. Например, подключите средство проверки прослушивателя следующим образом:
var listenerPresent=false
затем, если вы установите слушателя, просто измените значение:
listenerPresent=true
затем внутри вашего обратного вызова eventListener вы можете назначить определенные функции внутри и таким же образом распределить доступ к функциям в зависимости от некоторого состояния в качестве переменной, например:
accessFirstFunctionality=false
accessSecondFunctionality=true
accessThirdFunctionality=true
Просто удалите событие перед его добавлением:
document.getElementById('link2').removeEventListener('click', linkclick, false);
document.getElementById('link2').addEventListener('click', linkclick, false);
Я только что узнал об этом, пытаясь узнать, связано ли мое событие....
если вы выполните:
item.onclick
он вернет "null"
но если вы выполните:
item.hasOwnProperty('onclick')
то это "TRUE"
поэтому я думаю, что когда вы используете addEventListener для добавления обработчиков событий, единственный доступ к нему - через "hasOwnProperty". Хотелось бы, чтобы я знал, почему или как, но, увы, после исследования я не нашел объяснений.
Теоретически вы можете добавить addEventListener и removeEventListener, чтобы добавить флаг удаления к объекту this. Гадкий, и я не проверял...