addEventListener для Всех событий

[Andy_kun]

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

То есть я понимаю, что сигнатура функции addEventListener() - содержит, как я понимаю два обязательных параметра, но может, как то можно все таки ?

[ksa]

То есть я понимаю, что сигнатура функции addEventListener() - содержит, как я понимаю два обязательных параметра, но может, как то можно все таки ?

Т.е. понимание не может преодолеть желание?

[Andy_kun]

Т.е. понимание не может преодолеть желание?

Да

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

Object.keys(window).forEach(key => {
    if (/^on/.test(key)) {
        element.addEventListener(key.slice(2), event => {
            console.log(event);
        });
    }
});

[Aetae]

Andy_kun, тогда уж так:

function addAllEventListeners(element, callback) {
  for (const key in element) if(key.startsWith('on')) {
    element.addEventListener(key.slice(2), callback);
  }
}

потому что разные элементы могут поддерживать разные события.)

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

[Andy_kun]

function addAllEventListeners(element, callback) {
  for (const key in element) if(key.startsWith('on')) {
    element.addEventListener(key.slice(2), callback);
  }
}

Спасибо!

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

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

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

for (const key in element)
{
...
}

[Aetae]

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

[Andy_kun]

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

То есть в данном случае for..in - это аналог: Object.getOwnPropertyNames() ?

[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)]);
}

[Andy_kun]

{
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

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

[Aetae]

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. В большинстве случаев вы не хотите лезть в цепочку наследования с шансом притащить что-то ненужное.)