Missing Parameters for JS Function, Still Works?

user_7353382 0
Viewed 144

I've been struggling with the idea of when to receive/pass parameters to JavaScript functions and reading this article on onchange event handlers at MDN helped me crystallize my question. Here's the code from the article:

<input type="text" placeholder="Type something here, then click outside of the field." size="50">
<p id="log"></p>

let input = document.querySelector('input');
let log = document.getElementById('log');

input.onchange = handleChange; //<<< Question on this <<<<<<

function handleChange(e) {
  log.textContent = `The field's value is
      ${e.target.value.length} character(s) long.`;
}

I see that input has an onchange Event handler that provides data to the handleChange() function. It even states that in the docs:

The function receives an Event object as its sole argument.

Yet, I'm struggling to understand how handleChange() is receiving the Event object when it doesn't have parentheses accepting any argument?

input.onchange = handleChange; // Where's the parentheses?

Is the Event object global and that's how handleChange() is manipulating it? If that were the case, couldn't you omit the e argument when defining the function?

parameters arguments function scope javascript
4 Answers

On the line in question, you're assigning a method as the handler (literally, setting a property of the input object to be a method reference). You are not calling that method. The browser is then responsible for creating an Event object and passing it to handleChange each time it detects that an appropriate onChange event has taken place.

It's the difference between telling your friend the phone number of the pizza place and your friend ordering a different pizza at five separate times.

user_6205540

The onchange atttribute normally takes a function as a value (the function that is called when something changes in this case). So the 'normal' form is:

input.onchange = function (e) { .... };

The notation you have in your code comes down to exactly the same, except that because you made handleChange a separate function it can be reused.

user_119561070 
input.onchange = handleChange;

Above statement states that we are defining a function when a change event happens on input. If we add paranthesis, then it will call the function which we don't want.

It is way of assigning handlers to event. The handlers get executed when actual event happens.

Hope it will help.

user_105786380

By input.onchange = handleChange; you are only telling the program that whenever the input is changed then you should call handleChange function. You don't need to specify the arguments.

All the events are handled internally. Whenever the event is triggered the EventObject is automatically passed to the function.

Consider the below example which used setInterval and a function with one argument

//The below function is just like handleChange()
function test(num){
  console.log(num);
}

const object = {}; //Its just like "input" element object
object.func = test; //its just like setting input.onchange = handleChange

//This is an example of the function which calculates or creates an event object and then pass it to the defined function
function callFuncOfObject(){
  let valueCalculated = Math.floor(Math.random() * 100)
  test(valueCalculated);
}

setInterval(callFuncOfObject, 1000)

user_98191460
Related