Из-за чего не работает addEventListener?

Question

[Vladislav Pal]

<ul>
        <li>OH...  li-s</li>
        <li>OH...  li-s</li>
        <li>OH...  li-s</li>
    </ul>

var firstAtAll = document.querySelector("li");
        for(var i = 0; i < firstAtAll.length; i++){
            // 1
            firstAtAll[i].addEventListener("mouseover",function(){
                console.log("damn, it's working");
                this.style.color="DeepSkyBlue";
            });
            // 2
            firstAtAll[i].addEventListener("mouseout",function(){
                console.log("damn, it's working again");
                this.style.color="black";
            });
        }

Суть в том,чтобы для каждого li добавить hover через js

Answer 1

[Stalker_RED]

А что с этим кодом не так, кроме разве что querySelector где подразумевался querySelectorAll?

Цвет меняется, сообщение выводятся.

Answer 2

[v3shin]

document.querySelectorAll("li");

Answer 3

[Дмитрий Беляев]

Ну во-первых, если задача выглядит именно так, поменять стили элемента при наведении, то CSS с ней справится в разы быстрее, не надо это на JS делать.

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

В-третьих, никогда не создавайте функции в циклах (а так же в конструкциях реализующих циклы под капотом, вроде forEach). В вашем примере на каждой итерации будет создано по 2 функции, каждая из которых потребует время на свое создание, блокируя основной поток, а так же каждая потребует памяти на свое хранение.
Чтоб было немножко понятно, каждая функция это:
- непосредственно объект функции (так как функции это полноценные объекты),
- объект замыкания (даже если функция ничего не замыкает),
- абстрактно синтаксическое дерево исходного кода функции
- байткод для интерпретатора
- данные анализа выполнения для последующих оптимизаций
- машинный код сгенерированный JIT компилятором
И все, кроме последних 2х пунктов создается в момент создания функции и потом хранится все время ее жизни.
Но самое главное, оптимизации одной из них никак не помогут оптимизировать другие, ибо это разные функции, хоть и делают одно и то же.
Ну и наконец, не забывайте, что метод bind каждый раз создает новую функцию, которая вызывает оригинальную, так что к нему это все то же относится.

Ну и в-четвертых, почитайте про this в обработчике, и подумайте, а с...