Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.08.2022, 23:09
Интересующийся
Отправить личное сообщение для Andy_kun Посмотреть профиль Найти все сообщения от Andy_kun
 
Регистрация: 05.08.2022
Сообщений: 17

addEventListener для Всех событий
Подскажите пожалуйста, можно ли привязать/вызвать addEventListener - так, чтобы callback срабатывал на Все события, которые генерируется для данного элемента при взаимодействии с ним ?

То есть я понимаю, что сигнатура функции addEventListener() - содержит, как я понимаю два обязательных параметра, но может, как то можно все таки ?
Ответить с цитированием
  #2 (permalink)  
Старый 06.08.2022, 10:59
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,889

Сообщение от Andy_kun
То есть я понимаю, что сигнатура функции addEventListener() - содержит, как я понимаю два обязательных параметра, но может, как то можно все таки ?
Т.е. понимание не может преодолеть желание?
Ответить с цитированием
  #3 (permalink)  
Старый 06.08.2022, 11:30
Интересующийся
Отправить личное сообщение для Andy_kun Посмотреть профиль Найти все сообщения от Andy_kun
 
Регистрация: 05.08.2022
Сообщений: 17

Сообщение от ksa Посмотреть сообщение
Т.е. понимание не может преодолеть желание?
Да

Нашел такое решение:

Object.keys(window).forEach(key => {
    if (/^on/.test(key)) {
        element.addEventListener(key.slice(2), event => {
            console.log(event);
        });
    }
});
Ответить с цитированием
  #4 (permalink)  
Старый 06.08.2022, 12:14
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,150

Andy_kun, тогда уж так:
function addAllEventListeners(element, callback) {
  for (const key in element) if(key.startsWith('on')) {
    element.addEventListener(key.slice(2), callback);
  }
}
потому что разные элементы могут поддерживать разные события.)

Ну и всякие особые события (типа DOMContentLoaded) и кастомные собтия так не навесить всё равно.
__________________
29375, 35

Последний раз редактировалось Aetae, 06.08.2022 в 12:21.
Ответить с цитированием
  #5 (permalink)  
Старый 06.08.2022, 13:13
Интересующийся
Отправить личное сообщение для Andy_kun Посмотреть профиль Найти все сообщения от Andy_kun
 
Регистрация: 05.08.2022
Сообщений: 17

Сообщение от Aetae Посмотреть сообщение
Andy_kun, тогда уж так:
function addAllEventListeners(element, callback) {
  for (const key in element) if(key.startsWith('on')) {
    element.addEventListener(key.slice(2), callback);
  }
}
потому что разные элементы могут поддерживать разные события.)

Ну и всякие особые события (типа DOMContentLoaded) и кастомные собтия так не навесить всё равно.
Спасибо!

А подскажите пожалуйста, а чем:

Object.keys(element).forEach(key...)


Отличается от:

for (const key in element)
{
...
}
Ответить с цитированием
  #6 (permalink)  
Старый 06.08.2022, 13:18
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,150

Andy_kun, Object.keys берёт ключи только у самого объекта, for in производит итерацию по всем enumerable ключам, включая унаследованые. В большинстве случаев Object.keys предпочтительней и надёжней, но в данном случае html элементы имеют глубокую иерархию наследования, потому for in приходится как нельзя кстати.
__________________
29375, 35
Ответить с цитированием
  #7 (permalink)  
Старый 06.08.2022, 13:22
Интересующийся
Отправить личное сообщение для Andy_kun Посмотреть профиль Найти все сообщения от Andy_kun
 
Регистрация: 05.08.2022
Сообщений: 17

Сообщение от Aetae Посмотреть сообщение
Andy_kun, Object.keys берёт ключи только у самого объекта, for in производит итерацию по всем enumerable ключам, включая унаследованые. В большинстве случаев Object.keys предпочтительней и надёжней, но в данном случае html элементы имеют глубокую иерархию наследования, потому for in приходится как нельзя кстати.

То есть в данном случае for..in - это аналог: Object.getOwnPropertyNames() ?
Ответить с цитированием
  #8 (permalink)  
Старый 06.08.2022, 13:32
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,150

Andy_kun, нет, for in, если условно, равносильно рекурсивному вызову Object.keys вверх по цепочке наследования (Obect.keys(el) + Object.keys(Object.getProtiotypeOf(el)) + ...). Object.getOwnPropertyNames получает также как и keys только свойства самого объекта, но в отличение от keys он получает все свойства, а не только перечислимые(enumerable).

{
const parent = {
  parentProp: 'bar'
};
const child = Object.create(parent, {
  nonEnumerableChildProp: {
    enumerable: false,
    value: 'buz'
  }
});
child.childProp = 'foo';

function *keys (obj) {
  for (const key in obj)
    yield key;
} 
  
console.log('child.parentProp', child.parentProp);
console.log('child.childProp', child.childProp);
console.log('child.nonEnumerableChildProp', child.nonEnumerableChildProp);

console.log('object.keys', Object.keys(child));
console.log('object.getOwnPropertyNames', Object.getOwnPropertyNames(child));
console.log('for in', [...keys(child)]);
}
__________________
29375, 35

Последний раз редактировалось Aetae, 06.08.2022 в 13:45.
Ответить с цитированием
  #9 (permalink)  
Старый 06.08.2022, 13:52
Интересующийся
Отправить личное сообщение для Andy_kun Посмотреть профиль Найти все сообщения от Andy_kun
 
Регистрация: 05.08.2022
Сообщений: 17

Сообщение от Aetae Посмотреть сообщение
Andy_kun, нет, for in, если условно, равносильно рекурсивному вызову Object.keys вверх по цепочке наследования (Obect.keys(el) + Object.keys(Object.getProtiotypeOf(el)) + ...). Object.getOwnPropertyNames получает также как и keys только свойства самого объекта, но в отличение от keys он получает все свойства, а не только перечислимые(enumerable).

{
const parent = {
  parentProp: 'bar'
};
const child = Object.create(parent, {
  nonEnumerableChildProp: {
    enumerable: false,
    value: 'buz'
  }
});
child.childProp = 'foo';

function *keys (obj) {
  for (const key in obj)
    yield key;
} 
  
console.log('child.parentProp', child.parentProp);
console.log('child.childProp', child.childProp);
console.log('child.nonEnumerableChildProp', child.nonEnumerableChildProp);

console.log('object.keys', Object.keys(child));
console.log('object.getOwnPropertyNames', Object.getOwnPropertyNames(child));
console.log('for in', [...keys(child)]);
}

Еще раз спасибо! А где можно про этот обход почитать и про "ключевое слово" в данном случае key ?
А что если для этих свойств нужно получить значения ?
Существует аналог слова "key" для values ?

PS:for...in - только для свойств. Тут написано: https://developer.mozilla.org/ru/doc...ments/for...in

Как же тогда сопоставить этим свойствам их значения?

Последний раз редактировалось Andy_kun, 06.08.2022 в 14:10.
Ответить с цитированием
  #10 (permalink)  
Старый 06.08.2022, 14:19
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,150

Andy_kun, for in - это просто цикл, key, соответственно, просто переменная.)
Значения получаем также как и во всех "дедовских" циклах, руками:
{
const obj = {
  foo: 1,
  bar: 2
}

for (const key in obj) {
  const value = obj[key];

  console.log(key, value)
}
}


Ну и в целом рекомендуется не злоупотреблять for in там где работает Object.keys. В большинстве случаев вы не хотите лезть в цепочку наследования с шансом притащить что-то ненужное.)
__________________
29375, 35

Последний раз редактировалось Aetae, 06.08.2022 в 14:27.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как заставить JS обрабатывать функции для всех блоков с заданным классом? GTX14 Общие вопросы Javascript 1 04.04.2015 16:12
addEventListener для input text jonrut Events/DOM/Window 5 23.11.2014 10:23
Одна функция для всех тегов по одному событию antsivash Общие вопросы Javascript 1 21.10.2012 23:18
Пошаговый вывод скрипта для IE всех версий. Zidky Элементы интерфейса 10 17.06.2009 17:27
Как присвоить текст строке состояния для всех браузеров? Tend Общие вопросы Javascript 4 14.05.2009 15:38