[javascript] Keyup event and change event questions

Hello, the code in the link below is to find out if there is a city with the word you entered and to print it out on the screen. https://codepen.io/w00kgod/pen/XGbpwy

After the input occurs in the input tag, to find out if the input value is included in the array containing the city's information

input.addEventListener('change',function(){
  const matchedArray = FindMatchesArray(input.value,cities);
  displayMatchedArray(matchedArray);
});

I received a change event as shown in . In this case, the screen does not print out after you input it I had to click somewhere else with my mouse. Question 1: I think it is because I only input it with a keyboard because I don't think it's a change event. What event does the change event use to handle? In this case, it seems right to receive and handle the keyup event, not change. It is said that the change event is mainly used when there is a change in input. Among the changes, most of them seem to be changes that can be handled by keyups, so I'm curious about the cases where I usually use them.

Therefore, we added a keyup event so that the output occurs every time a letter is entered.

input.addEventListener('keyup',function(){
  const matchedArray = FindMatchesArray(input.value,cities);
  displayMatchedArray(matchedArray);
});

Question 2: Why is the value of input.value stored after the keyup event occurs? Why is input.value saved in keyup event?