Javascript Question posted in
A very good W3school tutorial can be found here.

JavaScript event deprecated on function with parameters

I was given two functions that are nearly identical, but one uses a parameter.

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

I was able to change the first function to work properly by simply adding event as the function parameter.

function handleBlur(event) {
  const list = event.currentTarget.closest("#nav ul");
  if (!event.relatedTarget || !list.contains(event.relatedTarget)) {
    closeNav();
  }
}

How would I change the second function to not warn of deprecation?

I tried adding event as both a first and second parameter, but this breaks the functionality.

The function is called later in the code like this:

dropdowns.forEach((dropdown) => {
  const list = dropdown.querySelectorAll("li a");
  list[list.length - 1].addEventListener("blur", (event) => {
    handleDropdownBlur(dropdown.previousElementSibling);
  });
});
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Forwarding the event by changing the function to function handleDropdownBlur(event, btn) and then calling the function using handleDropdownBlur(event, dropdown.previousElementSibling) fixed the deprecation warning and it works fine.

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

  2. 0

    Your current function definition of handleDropdownBlur uses the global event variable, which is indeed deprecated.

    Changing your code to:

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

    Will forward the event object provided by addEventListener to handleDropdownBlur as the first argument. You then have to change the handleDropdownBlur definition to also accept this argument:

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

    This doesn’t have to be the first argument and could also be forward as the second, or any other argument for that matter. But it’s common practice to let event always be the first argument with any additional data following it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search