Событие JavaScript устарело для функции с параметрами
Мне дали две почти идентичные функции, но одна использует параметр.
function handleBlur() {
const list = event.currentTarget.closest("#nav ul");
if (!event.relatedTarget || !list.contains(event.relatedTarget)) {
closeNav();
}
}
function handleDropdownBlur(btn) {
const list = event.currentTarget.closest("#nav ul");
if (!event.relatedTarget || !list.contains(event.relatedTarget)) {
closeDropdown(btn);
}
}
Мне удалось заставить первую функцию работать правильно, просто добавив event в качестве параметра функции.
function handleBlur(event) {
const list = event.currentTarget.closest("#nav ul");
if (!event.relatedTarget || !list.contains(event.relatedTarget)) {
closeNav();
}
}
Как бы я изменил вторую функцию, чтобы не предупреждать об устаревании?
Я попробовал добавить event в качестве первого и второго параметра, но это нарушает функциональность.
Функция вызывается позже в коде следующим образом:
dropdowns.forEach((dropdown) => {
const list = dropdown.querySelectorAll("li a");
list[list.length - 1].addEventListener("blur", (event) => {
handleDropdownBlur(dropdown.previousElementSibling);
});
});
Вы можете использовать анонимную функцию в addEventListener(): element.addEventListener('blur', event => handleDropdownBlur(event, btn))
Что в нем «не работает должным образом»? Как вы его используете? Внутри функции используется переменная с именем event, откуда она берется, если не параметр функции?
Как handleDropdownBlur используется в вашем коде?
@Дэвид, вероятно, глобальный event, который существует в IE и Chrome. Когда обработчик событий выполняет глобальный event, присваивается параметру события, который получит функция. IIRC, именно IE начал навязывать очень ленивую и подверженную ошибкам практику написания кода. Chrome принял его по неизвестным мне причинам. И FF не принял это, что звучит разумно. Однако я не уверен, что ландшафт вокруг глобальной event изменился за последние несколько лет. Обновлено: Является ли событие глобальной переменной, которая доступна повсюду внутри цепочки обратных вызовов?
Если да element.addEventListener('blur',handleBlur), то проходить мероприятие не нужно. Пожалуйста, покажите HTML или код, в котором вы назначаете handleBlur (вероятно, встроенный, что не рекомендуется).
@mplungjan Я обновил вопрос, указав, как функция вызывается позже в коде.
@garrett: Учитывая обновление... Что именно ты спрашиваешь? Функция принимает один аргумент, и вы передаете ей один аргумент. Когда вы изменяете функцию, чтобы она принимала другой аргумент, вы передаете еще один аргумент? С какой проблемой вы столкнулись в коде, который показываете нам?
@Дэвид, меня предупреждают, что event устарело.
@garrett: Проголосовали за повторное открытие. Глобальный объект event действительно устарел. Однако объект event уже передан прослушивателю событий. Вы можете передать этот объект в свою функцию.
@ 3limin4t0r Это привело к исчезновению предупреждения об устаревании. Спасибо.
@ 3limin4t0r, пожалуйста, опубликуйте это как ответ сейчас, когда вопрос был открыт повторно.
Было бы еще лучше увидеть минимально воспроизводимый пример с соответствующим HTML. Всякий раз, когда я вижу обработку событий с использованием цикла, я рекомендую делегировать события из ближайшего статического контейнера.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Пересылка события путем изменения функции на function handleDropdownBlur(event, btn), а затем вызов функции с помощью handleDropdownBlur(event, dropdown.previousElementSibling) исправила предупреждение об устаревании, и оно работает нормально.
function handleDropdownBlur(event, btn) {
const list = event.currentTarget.closest("#nav ul");
if (!event.relatedTarget || !list.contains(event.relatedTarget)) {
closeDropdown(btn);
}
}
dropdowns.forEach((dropdown) => {
const list = dropdown.querySelectorAll("li a");
list[list.length - 1].addEventListener("blur", (event) => {
handleDropdownBlur(event, dropdown.previousElementSibling);
});
});
В вашем текущем определении функции handleDropdownBlur используется глобальная переменная события , которая действительно устарела.
Изменение вашего кода на:
dropdowns.forEach((dropdown) => {
const list = dropdown.querySelectorAll("li a");
list[list.length - 1].addEventListener("blur", (event) => {
// accept the event object from addEventListener ^
handleDropdownBlur(event, dropdown.previousElementSibling);
// forward the event ^ to handleDropdownBlur
});
});
Пересылает объект event, предоставленный addEventListener, в handleDropdownBlur в качестве первого аргумента. Затем вам придется изменить определение handleDropdownBlur, чтобы оно также приняло этот аргумент:
function handleDropdownBlur(event, btn) {
// accept the event as first ^ argument
const list = event.currentTarget.closest("#nav ul");
if (!event.relatedTarget || !list.contains(event.relatedTarget)) {
closeDropdown(btn);
}
}
Это не обязательно должен быть первый аргумент, его также можно использовать в качестве второго или любого другого аргумента в этом отношении. Но общепринятой практикой является использование event в качестве первого аргумента, а за ним следуют дополнительные данные.
Привет! Добро пожаловать в StackOverflow! Пожалуйста, ознакомьтесь с нашим туром , чтобы лучше понять, как задать хороший вопрос . После этого, пожалуйста, отредактируйте свой вопрос, добавив весь соответствующий код, чтобы создать минимальный воспроизводимый пример.