HTML keydown Event Listener

I did not fully understand. But since you asked. I did some tests. Here are my findings:

There are two workable ways:

  1. The function has to be embedded in the addEventListener. In this case, it has to be the word function:
	function KMInit() {
		window.addEventListener("keydown", function(e){
		    if(e.keyCode == 13 && e.metaKey) {
       			submitWindow(event);
      			}
     		});
	} 

We can NOT change function to a function name, such as keydownHandler. This will NOT work:

	function KMInit() {
		window.addEventListener("keydown", keydownHandler(e){
		    if(e.keyCode == 13 && e.metaKey) {
       			submitWindow(event);
      			}
     		});
  1. We can use a function name in the addEventListener and define it in another place:
	function KMInit() {
     		window.addEventListener("keydown", keydownHandler);
	} 

	function keydownHandler(e) {
		if(e.keyCode == 13 && e.metaKey) {
		submitWindow(event);
		}
	}

In this case, we can NOT put a parenthesis after the function name in the addEventListener, such as: keydownHandler() or keydownHandler(e). This will NOT work:

	function KMInit() {
		window.addEventListener('keydown', keydownHandler());
	} 

	function keydownHandler(e) {
		if(e.keyCode == 13 && e.metaKey) {
		submitWindow(event);
		}
	}
1 Like