Например, вот такая функция:

elem.addEventListener('click', function() {
 alert('!');
});

-----------------------

Почему бы не сделать вот так:

function alert() {
 alert('!');
}

elem.addEventListener('click', alert());

скобки лишние в addEventListener, но да, второй вариант предпочтительнее особенно если нужно потом это листенер удалить, не знаю с чего вы взяли что все делают как в первом варианте

Ну на самом деле большинство так и пишут, правда из-за неграмотности. Я недавно такой же код у "сеньоров" видел...

Все курсы, видосы. примеры. Везде используется данный подход. Пихают тело анонимной функции в параметр другой функции, вместо того чтоб анонимную определить заранее по имени и в рабочую функцию задавать уже по имени вместо тела анонимной

в примерах и видосах просто чтобы не грузить лишней инфой, доп переменными и т.д., чтобы сконцентрировать внимание на задаче

На самом деле очень хочу увидеть откуда идет такой стиль - устал бить по рукам.

Я на Python работаю. Привык чтоб функцию заранее с именем определить, а потом ее пихать куда нужно. А тут изначально из функции делают лапшу. Я думал, на это есть какая-то серьезная причина.

Просто очень часто ставят знак равенство работает  == правильно. А это не так

Так и в js так можно. Просто в параметр другой функции встав ее название, а не анонимную функцию и все)

Делай так, только внизу у функции скобки убери)

Так она же не должна сработать)

Ребят подскажите почему применяется к одному элементу только и как это исправить🥺🥺

про скобки понял, типа так да elem.addEventListener('click', alert);

Типа, да)

Query selector all - у вас берется по одному элементу😉

тут нагуглил такое   =>  Поставка анонимной функции в качестве параметра для другой функции

Некоторые функции могут принимать ссылку на функцию как параметр. Они иногда называются «инъекциями зависимостей» или «обратными вызовами», потому что они позволяют функции вашего вызова «перезванивать» на ваш код, предоставляя вам возможность изменить способ поведения вызываемой функции. Например, функция карты объекта Array позволяет выполнять итерацию по каждому элементу массива, а затем строить новый массив, применяя функцию преобразования к каждому элементу.

var nums = [0,1,2];
var doubledNums = nums.map( function(element){ return element * 2; } ); // [0,2,4]

Было бы утомительно, неряшливо и ненужно создавать именованную функцию, которая загромождала бы вашу область видимости только функцией в этом одном месте и нарушала естественный поток и чтение вашего кода (коллеге пришлось бы оставить этот код, чтобы найти ваш чтобы понять, что происходит).

Queryselectorall

оказівается то что мне не нравится, с точки зрения js это неряшливо)