Запуск скрипта с параметром при нажатии на элемент

Question

• 1000 *

document.getElementById("item").onclick = something('parameter');

Функция запускается с параметром при первом запуске страницы, и скрипт не вызывается при щелчке элемента.

Я могу сделать это, что решает мою проблему:

document.getElementById("item").onclick = function(){something('parameter');}

Но почему первая строка кода работает, а вторая не работает?

Answer 1

Первая строка работает, потому что вы назначаете something, которая является функцией, обработчику onclick. Обработчик onclick ожидает функцию, которую вы правильно предоставляете.

Вторая строка не работает, потому что вы сначала вызываете something, а затем назначаете его возврат значение обработчику onclick. Если это возвращаемое значение не является функцией, обработчик onclick не будет знать, что с ним делать.

Найденное вами решение - хорошее решение. Это особый c экземпляр метода, называемого «частичным», который позволяет вам подготовить параметры перед вызовом.

Answer 2

В качестве альтернативы вы можете рассмотреть возможность переключения с обработчиков событий на прослушиватели событий (которые обычно считаются лучшими по нескольким причинам, включая универсальность.)

Это Учебник хорошо объясняет разницу.

Надуманный пример ниже показывает, как работают слушатели событий.

Что касается параметров, первый параметр слушателя всегда является событием , а свойство события target дает нам доступ к DOM (через элемент, в котором произошло событие). Итак, пока желаемое значение существует в DOM, нет необходимости предоставлять это значение как явное аргумент.

// Identifies elements on the page
const
  item = document.getElementById("item"),
  list = document.getElementById("list");

// Calls addItem when the `item` element is clicked
item.addEventListener("click", addItem);

function addItem(event){

  const
    localReferenceToItem = event.target,
    text = localReferenceToItem.value;  

  if(text === ""){ return; }
  localReferenceToItem.value = "";

  console.log(text);  

  const
    newTextNode = document.createTextNode(text),
    newListItem = document.createElement("li");

  newListItem.appendChild(newTextNode);
  list.appendChild(newListItem);
}

<input id="item"/>
<ul id="list"></ul>

Answer 3

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

Итак, когда вы выполняли id.onclick = function, вы присваивали саму функцию элементу.

Но когда вы выполнили id.onclick = function (param), вы только что выполнили функцию, и в этот раз элемент не сохранил функцию.

Так что лучше сделать это последним способом ты сделал это. Например.

id.onclick = function (param) {}

Answer 4

Если вы добавляете () к своей функции, вы, по сути, вызываете ее прямо сейчас. Сценарий не распознает, что вы хотите установить его равным событию onclick, потому что он просто видит его, когда вы пытаетесь запустить эту функцию.

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

Например element.onclick = function(...params){...}

Подробнее о вызове функции JS: https://www.w3schools.com/js/js_function_invocation.asp