submit is the name given a cached node, likely an input with type=“submit”.
const submit = document.querySelector('input[type="submit"]');
A cached node is not just a single element. It is a tree-like structure that includes the target element and all its child elements. In this case we know it is a single element,
The above notwithstanding, a cached node is an object instance with the name we give it.
Every node object has an
addEventListener method. This registers a ‘click’ event with a handler function specified by reference, known as the callback. In this case, a click on the target element will fire that function.
The function binds itself to the global
event object of which there can only ever be one; the most recent event must be handled before another event can be triggered.
event is an object instance with it’s own attributes and methods, of which
preventDefault is one. Browsers have built in behavior on the Submit button. If not prevented, it assembles all the input data of the form controls into a query string known as POSTDATA which is then affixed to the request URL specified in the
action="..." attribute of the
event.preventDefault() short-circuits that process and lets the handler (or program) take control of the form data.
The name of this callback function suggests (pun not intended) there may be none or more items in a list (an array or an object as applies) and its role is to clear that list so it is empty when the loop ends. The final instruction invokes a global function to, as it were, repopulate that suggestion list.