CODEWITHSUNDEEP
javascripthtmlfunctionobject
Michał Markiewicz
Michał Markiewicz

Reputation: 17

How passing informations about event to javascript functions work

**I already fixed the problem, but I want to understand how it works (just for curiosity). I've been searching about this problem for long time and I didn't found the right source of information about this. Don't give me external links to 1990 websites, please. **

So basically, I wanted to call a function when user clicks enter button. I wanted to pass information about which button was pressed (in my HTML) to my function in external script.js file and check if it was button "Enter", so my program can proceed to next instructions. And i found something called Event Accesing and it did work actually, but explanation was so horrible that It works but i don't know why. Here's the code. 

function myFunction(e) {
  if (e.keyCode == 13) {
      alert('It works!');
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>To-do list</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="entryText">
  <h1>Good evening!</h1>
  <h2>This is to-do list app written in plain javascript :)</h2>
  <h2>Type your task and click enter on your keyboard</h2>
  </div>
  <div id="input-container">
      <input type="text" id="type_here" placeholder="New task here.." onkeydown="myFunction(event);">
  </div>

<script src="js/script.js" defer></script>
</body>
</html>

Upvotes: 0

Views: 55

Answers (2)

DevStormUK
DevStormUK

Reputation: 288

Michal while your script.js file is external to the HTML document when you include the script tag before you are importing the entire script.js code into the HTML document. So it is fair to say that this example below is how the browser will interpret the code (you could even write it like this):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>To-do list</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="entryText">
  <h1>Good evening!</h1>
  <h2>This is to-do list app written in plain javascript :)</h2>
  <h2>Type your task and click enter on your keyboard</h2>
  </div>
  <div id="input-container">
      <input type="text" id="type_here" placeholder="New task here.." onkeydown="myFunction(event);">
  </div>

<script>
    function myFunction(e) {
      if (e.keyCode == 13) {
          alert('It works!');
      }
    }
</script>
</body>
</html>

The code myFunction(e) take a single parameter in your case you have used the letter 'e' to show that your function takes one parameter. We tend to use something that indicates what we're expecting to be passed to a function, in this case we are expecting and 'event', some people would write the function like this

  1. myFunction(event)
  2. myFunction(e)

Both 1 and 2 are the same but it's generally accepted in the programming community that 'e' stands for 'event' - when you're typing out code all day long it makes sense to shorted and abbreviate words so you can code faster, you could put anything you want like:

  • myFunction(thing)

...but that's not very helpful if you're someone trying to read someones code, where as 'e' or 'event' is descriptive enough to know that the function wants to be passed an 'event'.

On your line of code:

<input type="text" id="type_here" placeholder="New task here.." onkeydown="myFunction(event);">

you have:

onkeydown="myFunction(event);"

the 'onkeydown' part will fire every time a key is pressed, when a key is pressed it will emit an 'event' with lots of information including the key that was pressed. Your code is saying - when someone presses a key pass that information (the event) onto myFunction(event).

You could re-write the line of code like this:

<input type="text" id="type_here" placeholder="New task here.." onkeydown="myFunction(theInformationFromTheOnkeydownEvent);">

...the string 'theInformationFromTheOnkeydownEvent' isn't the actual 'event' information, it's just some word(s) we've chosen to show that something is being passed to the myFunction function, onkeydown will pass the event information to the myFunction because we've included some text between the parenthesis. If we didn't put anything between the parenthesis then the onkeydown would not pass any information to the myFunction() because we've explicitly told it not to by omitting text like this: myFunction()

Imagine:

onkeydown="myFunction(passTheOnkeydownEventOnToMyFunction)" <- passed info onto myFunction

onkeydown="myFunction()" <- does not pass any information onto myFunction

...the words inside the parenthesis in this case don't matter because the onkeydown is a DOM function (yes it's a function, and it returns event information) so when it's called it will return event information to what ever you want it to, in your case it's returning it to your myFunction.

When you look at your script.js file and the myFunction code you decided to put 'e' inside the parenthesis, you could have chosen 'event' or 'eventData'. The only important thing is that you use the same string throughout your myFunction code block, the three example below work the same and would work with your HTML code I've just changed the 'words' between the parenthesis (some are more descriptive than others):

function myFunction(e) {
  if (e.keyCode == 13) {
      alert('It works!');
  }
}

function myFunction(event) {
  if (event.keyCode == 13) {
      alert('It works!');
  }
}

function myFunction(thing) {
  if (thing.keyCode == 13) {
      alert('It works!');
  }
}

function myFunction(eventData) {
  if (eventData.keyCode == 13) {
      alert('It works!');
  }
}

I hope that makes things a little clearer?

Upvotes: 1

Ashish Kumar
Ashish Kumar

Reputation: 166

You have attached onkeydown event listener on the input field. So, whenever a key is being pressed, your myFunction function is called with event data.

Such keyDown events carry a keyCode property and each key on keyboard has a unique JS keyCode. You can find the mapping over here. For enter key, key code is 13.

Upvotes: 0

Related Questions