These two usages below seem work fine:

1. wrapper function without return

document.querySelector(`button`).addEventListener(`click`, delayedClickButton);

const timeout = 1000;
function delayedClickButton(evt) {
  setTimeout(
      function (){clickButton(evt)},
      timeout
    );
}

function clickButton(evt) {
  evt.target.style.color = `red`;
}

<button>Click</button>

2. wrapper function with return

document.querySelector(`button`).addEventListener(`click`, delayedClickButton);

const timeout = 1000;
function delayedClickButton(evt) {
  setTimeout(
      function (){return clickButton(evt);},
      timeout
    );
}

function clickButton(evt) {
  evt.target.style.color = `red`;
}

<button>Click</button>

Which one is correct when I want a click event handling function that is delayed for 1 second, and I want to access the target element in that function by using evt.target.

CodePudding user response：

The return statement isn't needed so the first example is better, although they both work. returns are useful for when we want to do something with a resulting value e.g.

const myFunc = ()=>{
  return 'I returned something'
}

console.log(myFunc())