These two usages below seem work fine:
- wrapper function with 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>
- wrapper function without 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.