2015-08-26 3 views
4

Я не понимаю некоторые части кода JavaScript, касающиеся параметров. Я нашел этот пример на w3schools:Лучшее понимание параметров JavaScript

<!DOCTYPE html> 
<html> 
<body> 

<a id="myAnchor" href="http://w3schools.com/">Go to W3Schools.com</a> 

<p>The preventDefault() method will prevent the link above from following the URL.</p> 

<script> 
document.getElementById("myAnchor").addEventListener("click", function(event){ 
    event.preventDefault() 
}); 
</script> 

</body> 
</html> 

Я путать с event параметра внутри функции. Этот код работает, хотя параметр event не стал аргументом, то есть он не имеет значения. Как можно использовать этот «пустой» параметр с помощью метода. Почему этот код работает? Я новичок в JavaScript, поэтому любой простой ответ был бы оценен.

+0

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

+0

@Pointy: Какая ценность? – Slit

+0

Браузер передаст объект события. Этот код настраивает обработчик событий. – Pointy

ответ

0

щелевая,

Функция, которая вызывается на «щелчок» событие является функцией «обратного вызова». После того, как событие «щелчок» поднимается, анонимная функция «обратного вызова», которая является «функцией (событием)», вызывается сразу с 1 параметром, который является «событием». Чтобы определить параметры, которые вызвала бы с вами анонимная функция, обратитесь к документации. После того, как вы найдете параметры, вы можете использовать и работать с ними внутри этой функции, например добавить «event.preventDefault(); alert (« test »)», и ничего не произойдет, когда вы нажмете на элемент, только всплывающее окно с " тест ".

Не стесняйтесь задавать любые вопросы, чтобы я мог улучшить свой ответ. Просто попытался объяснить на высоком уровне.

+0

Я думаю, что получил. Слово «событие» получает значение «щелчок», потому что так работает addEventListener. Если это «doubleclick», тогда слово «событие» будет иметь это значение. Мне трудно читать руководства по JavaScript, я не понимаю объяснений. На странице Mozilla сказано event.preventDefault(), и я не понял, что означает это «событие». Как будто я всегда путал немного «элемент», «HTMLElement», «node» или «object». – Slit

+0

Slit, не совсем. Когда событие «щелчок» поднимается, анонимная функция вызывается с использованием объекта «event» в качестве параметра. Это не слово, ни строка, ни другое ... Это объект. Используя этот объект, вы можете контролировать, что должно произойти при возникновении события click. Как я уже упоминал в своем ответе, вы можете предотвратить все дефолтные «вещи», которые обычно происходят. Например, когда вы нажимаете на ссылку, вы перенаправляетесь на URL-адрес, когда вы нажимаете «Отправить», то вы отправляете форму .. или вы можете просто «добавить» к по умолчанию «вещь» вашей конкретной логике, например, показать всплывающее «тест». –

+0

Но это «событие» не записывает слово, потому что я могу изменить его на «XYZ», и он работает. – Slit

0

Эта функция также известна как обратный вызов. Обратный вызов - это когда вы передаете одну функцию в качестве аргумента другому.

Попробуйте протестировать этот код, а затем щелкните в любом месте на странице:

window.addEventListener("click", click); 

function click() { 
    console.log(arguments); 
} 

Если вы откроете консоль, вы должны увидеть [MouseEvent]. Специальный объект arguments возвращает все аргументы, полученные функцией. Функция click получила только один аргумент MouseEvent, потому что оконный метод addEventListener отправляет событие обработчику события.

Вот подобный пример:

init("abc", logArgs); //--> "abc" 
init("abc", logDog); //--> "dog" 

function logArgs(x) { 
    console.log(x); 
} 

function logDog(x) { 
    console.log("dog"); 
} 

function init(x, callback) { 
    callback(x); 
} 

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

init("abc", function(y) { //the y parameter comes from the init function 
    console.log(y); //"abc" 
}); 

function init(x, callback) { 
    callback(x); //send the first argument to the anonymous function 
} 
Смежные вопросы