What is the parameter to use for event? how do i know?

Question

element.onkeypress = function(e) {
                    if(e.keyCode) {
                        element.keyCode = e.keyCode;
                    } else {
                        element.keyCode = e.charCode;
                    }
                };

Also in java script , there is also

<input onChange="a(event)"/>
<script>
function a(event) { 
    alert(event.target.value);
}
</script>

As a parameter receiving, how do I know if I must put event for parameter instead of e? Second example wont work if it's the parameter is anything other than event aren't both javascript?

As someone who only tinkers with JavaScript sporadically, I keep running into this issue. I look it up, then next time I can't remember. Gotta fav this question so I can come back to it the next time it happens... — domsson, Sep 12 '17 at 14:21

score 3 · Answer 1 · answered Sep 12 '17 at 14:15

When you bind an event handler using an on* property or addEventListener, the event object will be passed as the first argument. You name it yourself as is usual when writing a function expression or function declaration. The normal restrictions on what you can name arguments apply (i.e. they must be valid identifier names). event, e and evt are common names for that variable.

When you bind an event handler using an on* attribute, you are writing only the function body (i.e. function (event) { and } are implied. The event object will be available in the event variable.

score 0 · Answer 2 · answered Sep 12 '17 at 14:10

function(e) is a normal function with a parameter. Parameters can have any names you want.

Inside onkeypress, the browser provides the event has a special parameter that is always named event. If you pass that to your own function, that function can use any parameter name it wants, as always.

Scott Marcus · Answer 3 · 2017-09-12T14:24:09.600

When setting up event callbacks using modern standards, the client automatically passes a reference to the event object into each event callback function. It will always be the first argument.

You don't need to do anything to make that happen. All you need to do is capture the reference and you can do that with any named argument you like. Since you are the recipient of the argument, the name you choose doesn't have to match up with anything. You can call it anything (that is a valid identifier that is).

Now, your example only works because in the Global scope of a web page the window object exposes a single event object and that is what a(event) is accessing.:

<input onChange="a(event)"/>
<script>
  function a(event) { 
    alert(event.target.value);
  }
</script>

But, this is not the modern way that events should be set up. Inline HTML event attributes (onclick, onchange, etc.) should not be used (here's why).

The modern approach is as follows and note that the registration of the event callback function (a) doesn't indicate anything about an event, yet the actual function is able to get the information it needs just by expecting an argument.

document.querySelector("input").addEventListener("change", a);
function a(anyNameIsGoodHere) { 
  alert(anyNameIsGoodHere.target.value);
}

<div>Type anything into the text field and then hit TAB</div>
<input>

hi , i'm using angular 2.0, how do i know what type of event is replica of addeventlistener ? ssorry , i do not have much concept about all these , like how they are used together ... how can the javascript into angular 2.0 module? — newB, Sep 14 '17 at 14:11
`.addEventListener()` isn't an event. It is the DOM API standard method for registering event handling functions. You can use it to register any event. In my example above, I'm using it to register a function called `a` to fire off when the `change` event of the `input` element occurs. — Scott Marcus, Sep 14 '17 at 14:18

score 0 · Answer 4 · answered Sep 12 '17 at 17:31

0

you can find which parameter is triggered on particular event by adding console.log("some text here") after every event.

You can see your logs in console

answered Sep 12 '17 at 17:31

Balaraju M

473
1
3
14

score -1 · Answer 5 · answered Sep 12 '17 at 14:19

When you define a function you can call the parameter anything you want (event, e, foo, etc...) and when you call the function you have to use the proper name of whatever you are passing to the function.

<input onChange="a(event)"/>
  <script>
    function a(foo) { 
      alert(foo.target.value);
    }
  </script>

<input onChange="b(event)"/>
  <script>
    function b(aParameter) { 
      alert(aParameter.target.value);
    }
  </script>

What is the parameter to use for event? how do i know?

5 Answers5

Linked

Related