Много раз вы увидите, как люди используют атрибут onclick, и просто return false в конце его. Хотя это работает надежно, это немного уродливо и может затруднить управление вашей кодовой базой.
<a href="#" onClick="submitComment(); return false;">
Отделите ваш HTML от вашего JavaScript
Это гораздо лучше для вас и вашего проекта, если вы отделите разметку от сценариев.
<a id="submit" href="enableScripts.html">Post Comment</a>
С помощью приведенного выше HTML мы можем найти этот элемент и подключить обработчик, когда пользователь нажимает на элемент. Мы можем сделать все это из внешнего файла .js, чтобы наш HTML оставался красивым и чистым, без каких-либо сценариев:
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", setup, false);
} else if (document.attachEvent) {
document.attachEvent("onreadystatechange", setup);
} else {
document.onload = setup;
}
function setup () {
var submit, submitComment;
submit = document.getElementById("submit");
submitComment = function (e) {
e = e || window.event;
e.preventDefault();
alert("You clicked the link!");
};
if (submit.addEventListener) {
submit.addEventListener("click", submitComment, false);
} else if (submit.attachEvent) {
submit.attachEvent("onclick", submitComment);
} else {
submit["onclick"] = submitComment;
}
}
В вышеприведенном коде многое происходит, но давайте пробежимся по нему с высоты 30 000 футов. Мы начнем с выяснения того, как лучше всего настроить наш код, когда браузер загружает страницу. В идеале мы хотели бы сделать это, когда DOM будет готов.
После нескольких условных проверок нам удается указать браузеру запустить нашу функцию после подготовки DOM (таким образом, наш якорный элемент существует для того, чтобы мы могли взаимодействовать с его поведением).
Наша функция установки получает ссылку на этот якорь, создает функцию, которую мы будем запускать при щелчке якоря, а затем находит способ присоединить этот вызов функции к событию щелчка якоря - уже сходит с ума? Это безумие, с которым разработчики JavaScript уже давно сталкиваются.
С jQuery это намного проще
Возможно, вы слышали о jQuery и задавались вопросом, почему он так популярен. Давайте решим ту же проблему, но на этот раз с помощью jQuery, а не сырого ванильного JavaScript. Предполагая следующую разметку:
<a id="submit" href="enableScripts.html">Post Comment</a>
Единственный JavaScript, который нам нужен (благодаря jQuery), это:
$(function(){
$("#submit").on("click", function(event){
event.preventDefault();
submitComment();
});
});
Вот и все - это все, что нужно. jQuery обрабатывает все тесты, чтобы определить, с учетом вашего браузера, что лучше всего сделать это или то . Он берет все сложные вещи и убирает их с пути, чтобы вы могли быть креативными.