Как переписать .each() jQuery в ванильном Javascript | Джастин Талк
Чтение: 2 мин.·
8 августа 2015 г.Я создавал прототипы некоторых взаимодействий ввода формы для моего текущего проекта, и теперь, когда у меня есть несколько рабочих примеров, я хотел реорганизовать код чтобы избавиться от jQuery как зависимости и повысить производительность.
Чтобы правильно запускать анимацию, мне нужно, чтобы Javascript запускался при двух событиях: когда ввод получает фокус и когда ввод теряет фокус (и чтобы проверить, пуст ли ввод при этом).
С помощью jQuery такая привязка событий довольно проста:
Не должно быть слишком сложно преобразовать это в обычный Javascript, верно?
Однако этот код не работает. Почему?
Различия между jQuery и Javascript
И $(‘.text-input’), и .getElementsByClassName(‘text-input’) выбирают все элементы HTML с заданным классом, и оба возвращают массивоподобные объекты, но второстепенные разница между ними в том, что селектор Javascript возвращает NodeList.
основное отличие заключается в том, что метод jQuery .on() может «присоединить функцию обработчика событий для одного или нескольких событий к выбранным элементам », тогда как метод .addEventListener() может работать только с единственной целью .
Итак, давайте рефакторим код, чтобы присоединить прослушиватель событий только к первому элементу (тому, что имеет позицию [0]) в объекте, подобном массиву.
Это работает, но чтобы распространить его на каждый элемент в массивоподобном объекте, нам необходимо реорганизовать код для циклического прохождения и присоединения прослушивателя событий к каждому элементу в массивоподобном объекте. Мы будем использовать метод Javascript .forEach() для однократного запуска функции для каждого элемента в массивоподобном объекте.
К сожалению, наш код снова дает сбой: в консоли появляется ошибка «inputs.forEach не является функцией». Это связано с тем, что метод .getElementsByClassName() не возвращает массив (у которого есть метод .
forEach()) — он возвращает объект , подобный массиву . Массивоподобные объекты:
— имеют: индексированный доступ к элементам и длину свойства, которая говорит нам, сколько элементов имеет объект.
— не имеет: методов массива, таких как push, forEach и indexOf.Два примера массивоподобных объектов являются результатом использования DOM-метода document.getElementsByClassName() (многие DOM-методы возвращают массивоподобные объекты) и аргументов специальной переменной.
Цикл по объекту, подобному массиву (старый способ)
Нам нужно сделать две вещи, чтобы выполнить цикл по объекту, похожему на массив, возвращаемому методом .getElementsByClassName().
- Получите доступ к методу Array.prototype.forEach(), доступному для реальных массивов,
- Используйте метод Function.prototype.call() для присвоения каждому элементу в массивоподобном объекте это значение в методе .forEach
Это выглядит так:
Успех! См.