I am looking for a way to differentiate between pressing Enter in a input[type="search"] event (search-event), and clearing the query by clicking X.

I have tried looking for variables in e and e.target

The only thing I can think of is:

search.addEventListener("search", (e) => {
 e.addEventListener("keypress", event => {
   if (event.key === "Enter") {
     ....
   }
 });

});

But I don't like this at all, and there is no way to specifically detect the clicking X. Normally I use handler functions, so the code readability will suffer from this event nesting I think.

Is there a built in way or better way to achieve this? All help & thoughts are welcome!