The difference between the two writing methods of calling functions in addEventListener

// 
let input1 = document.getElementById("input1");
let output1 = document.getElementById("output1");
input1.addEventListener("input", debounce(function() {
  output1.value = (input1.value || "").toUpperCase();
},
500));
// 
let input2 = document.getElementById("input2");
let output2 = document.getElementById("output2");
input2.addEventListener("input", debounceTrigger);

function debounceTrigger() {
  debounce(function() {
    output2.value = (input2.value || "").toUpperCase();
  },
  500)()
}

the first way of writing is normal, but the second way of writing is not.
if you write it in the second way, how can you achieve the same effect as the first one?

you can go to the following page to debug

Jun.06,2021

your function does not return a value.

function debounceTrigger() {
  return debounce(function() {
    output2.value = (input2.value || '').toUpperCase();
  },
  500)
}
input2.addEventListener('input', debounceTrigger());
Menu