Отсутствуют параметры для JS Функция, все еще работает? - PullRequest
2 голосов
/ 04 марта 2020

Я боролся с идеей, когда получать / передавать параметры JavaScript функциям, и чтение этой статьи о onchange обработчиках событий в MDN помогло мне кристаллизовать мой вопрос. Вот код из статьи:

<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.`;
}

Я вижу, что input имеет обработчик onchange, который предоставляет данные для функции handleChange(). В ней даже говорится, что в документах:

Функция получает объект Event в качестве единственного аргумента.

Тем не менее, я изо всех сил пытаюсь понять, как handleChange() получение объекта Event, когда в скобках нет аргументов?

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

Является ли объект Event глобальным, и вот как handleChange() манипулирует им? Если бы это было так, не могли бы вы опустить аргумент e при определении функции?

Ответы [ 4 ]

4 голосов
/ 04 марта 2020

В рассматриваемой строке вы назначаете метод в качестве обработчика (буквально, устанавливая свойство входного объекта в качестве ссылки на метод). Вы не вызываете этот метод. Затем браузер отвечает за создание Event объекта и передачу его handleChange каждый раз, когда он обнаруживает, что произошло соответствующее onChange событие .

Это разница между сообщая вашему другу номер телефона в пиццерии, и ваш друг заказывает другую пиццу пять раз подряд.

2 голосов
/ 04 марта 2020

Атрибут onchange обычно принимает функцию как значение (функция, которая вызывается, когда что-то меняется в этом случае). Таким образом, «нормальная» форма выглядит так:

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

Запись в вашем коде сводится к тому же, за исключением того, что, поскольку вы сделали handleChange отдельной функцией, ее можно использовать повторно.

0 голосов
/ 04 марта 2020

По input.onchange = handleChange; вы только сообщаете программе, что всякий раз, когда изменяется вход, вы должны вызывать функцию handleChange. Вам не нужно указывать аргументы.

Все события обрабатываются внутренне. Всякий раз, когда событие инициируется, EventObject автоматически передается в функцию.

Рассмотрим приведенный ниже пример, который использовал setInterval и функцию с одним аргументом

//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)
0 голосов
/ 04 марта 2020
input.onchange = handleChange;

Выше оператор утверждает, что мы определяем функцию, когда на входе происходит событие изменения. Если мы добавим парантез, он вызовет функцию, которая нам не нужна.

Это способ назначения обработчиков для события. Обработчики выполняются, когда происходит реальное событие.

Надеюсь, это поможет.

...