НТВ плюс 

Событие на кнопку javascript. Несколько простых примеров onclick на языке javascript. Настраиваем свои собственные события

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

Я покажу вам несколько способов работы с данным инструментом, объясню в чем их преимущества и недостатки, а также опишу работу jQuery с событиями. А теперь перейдем к разбору материала!

Назначение обработчиков событий

Для начала разберем теоретическую часть вопроса. Практически все на своих страницах обрабатывают скрипты. А обычно это различные события. Чтобы все эти запрограммированные события сработали, для них необходимо установить обработчик.

По правилам написания все обработчики включают в свое название «on+наименование события», что и соблюдено в onclick () . В зависимости от выбранного события обработка будет происходить вследствие разных действий. В нашем случае при использовании onclick () будут выполняться только те event-ы, которые были вызваны левым кликом мышки.

Различные способы назначения событийного обработчика

На сегодняшний день существует несколько вариантов внедрения в код обработчика некого или неких событий.

Использование простых событий

Начнем с простого варианта, который заключается во внедрении onclick () в саму разметку html-документа. Выглядит это следующим образом:

Как вы видите, при нажатии на кнопку левой кнопкой мыши появляется сообщение «Клик-клик!». Хочу обратить ваше внимание на одну маленькую, но существенную деталь. Внутри alert можно использовать только одинарные кавычки (‘’).

Также в данном случае можно использовать ключевое слово this . Оно ссылается на текущий элемент и предоставляет все ему доступные методы.

Нажми на меня

Эта строка кода создает кнопку с текстом «Нажми на меня». После нажатия вы увидите на экране сообщение: «"Нажмиии!». Оно и заменит первое название кнопки.

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

Если же необходимо использовать циклические конструкции, задействовать теги и т.д., то данный способ не подходит. Он уменьшит степень читабельности кода, а также сделает его громоздким и неаккуратным.

В таком случае стоит прибегать к функциям.

Работа с функциями

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

В качестве примера я прикрепил приложение для вывода пользователю результирующего числа в различных степенях, начиная с 1-ой и заканчивая 5-ой. Для этого я создал функцию countPow () , в которую можно передавать параметры. В моем приложении юзер должен вписать цифру в качестве переменной функции.

Таким образом, через обработчик, связанный с выше названной функцией, были выполнены вычисления и выведены на экран.

var result =1; function countPow(n) { for(var i=1; i div { height: 12px; background: blue; width: 0%; } body { height: 2000px; }

Scroll me...

var bar = document.querySelector(".progress div"); addEventListener("scroll", function() { var max = document.body.scrollHeight - innerHeight; var percent = (pageYOffset / max) * 100; bar.style.width = percent + "%"; });

Установив для элемента свойство position или fixed , мы получим тот же результат, что и при установке position:absolute . Но так мы также блокируем прокрутку элемента вместе с остальной частью документа. В результате индикатор прогресса будет статически закреплен в верхнем углу. Внутри него находится еще один элемент, размер которого изменяется в соответствии с текущим прогрессом.

В качестве единиц измерения при установке ширины мы используем % , а не рх , чтобы размеры элемента изменялись пропорционально размеру индикатора прогресса.

Глобальная переменная innerHeight содержит высоту окна, которую мы должны вычесть из общей доступной прокручиваемой высоты документа. Нельзя прокручивать окно ниже при достижении нижней части документа. С innerHeight также может использоваться innerWidth . Разделив pageYOffset (текущую позицию окна прокрутки ) на максимально допустимую позицию прокрутки и умножив на 100, мы получаем процент для индикатора прогресса.

Вызов preventDefault для JavaScript scroll event не предотвращает прокрутку. Обработчик события вызывается только после того, как происходит прокручивание.

События фокуса ввода

Когда элемент находится в фокусе ввода, браузер запускает в нем событие «focus «. Когда фокус ввода снимается, запускается событие «blur «.

Эти два события не имеют распространения. Обработчик родительского элемента не уведомляется, когда дочерний элемент выделяется фокусом ввода.

В следующем примере выводится подсказка для текстового поля, которое в данный момент находится в фокусе ввода:

Имя:

Возраст:

var help = document.querySelector("#help"); var fields = document.querySelectorAll("input"); for (var i = 0; i < fields.length; i++) { fields[i].addEventListener("focus", function(event) { var text = event.target.getAttribute("data-help"); help.textContent = text; }); fields[i].addEventListener("blur", function(event) { help.textContent = ""; }); }

Объект окна получает события «focus » и «blur «, когда пользователь переходит или покидает вкладку, окно браузера, в котором выводится документ.

Событие загрузки

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

и теги скриптов, которые загружают внешние файлы, также содержат событие «load «. Оно указывает, что файл, который был связан с ними, загружен. Как и события фокуса ввода, события загрузки не распространяются.

Когда мы закрываем страницу или переходим на другую (например, нажав на ссылку ), срабатывает событие «beforeunload «. Оно применяется, чтобы предотвратить возможность случайной потери пользователем того, с чем он работал, после закрытия документа.

Предотвращение выгрузки страницы выполняется не с помощью метода preventDefault . Вместо этого, из обработчика возвращается строка. Она используется в диалоговом окне, в котором у пользователя спрашивается, хочет ли он остаться на странице или покинуть ее. Этот механизм гарантирует, что у пользователя будет возможность покинуть страницу, даже если запущен вредоносный скрипт, целью которого является удержание посетителя на странице.

Последовательность выполнения скриптов

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

События JavaScript select events и все остальные могут запускаться в любой момент, но в одном документе два скрипта никогда не запустятся одновременно. Если скрипт уже выполняется, обработчикам событий и фрагментам кода, запланированным другим скриптом, придется подождать своей очереди. Именно по этой причине документ замирает, когда скрипт работает в течение длительного времени. Браузер не реагирует на клики и другие события, поскольку не может запустить обработчики событий, пока текущий скрипт не закончит работу.

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

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

Предположим, что в файле с именем code/squareworker.js у нас есть следующий код:

addEventListener("сообщение", function(event) { postMessage(event.data * event.data); });

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

var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);

Функция postMessage отправляет сообщение, которое инициирует возникновение в приемнике события «message «. Скрипт, который создал web workers , отправляет и получает сообщения через объект Worker . С помощью этого объекта среда взаимодействуют с создавшим ее скриптом, посылая информацию и прослушивая его в своем глобальном с оригинальным скриптом.

Установка таймеров

Функция setTimeout похожа на requestAnimationFrame . Она задает вызов еще одной функции, которая будет вызываться позже. Но вместо того, чтобы вызывать функцию при следующем формировании страницы, она ждет определенное количество миллисекунд. В этом примере JavaScript event фон страницы из синего становится желтым через две секунды:

document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000);

Иногда нужно отменить функцию, которую мы запланировали. Это делается путем сохранения значения, возвращаемого функцией setTimeout , и вызова для нее clearTimeout :

var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }

Функция cancelAnimationFrame работает так же, как clearTimeout . Она вызывается значением, возвращаемым requestAnimationFrame , чтобы отменить кадр (если он еще не был вызван ).

Похожий набор функций, setInterval и clearInterval используется для установки таймера, который должен повторять действие каждые X миллисекунд:

var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);

Дробление

Некоторые типы событий могут запускаться много раз в течение короткого периода времени (например, «mousemove » и javascript scroll event ). При обработке таких событий, нужно быть осторожным, чтобы это не происходило очень долго, иначе обработчик будет выполнять действие столько времени, что взаимодействие с документом станет медленным и скачкообразным.

Если нужно сделать что-то нестандартное в таком обработчике, можно использовать setTimeout , чтобы быть уверенными, что это не растянется слишком надолго. Это обычно называют дроблением события. Существует несколько отличающихся друг от друга подходов к дроблению.

В первом примере мы хотим сделать что-то, когда пользователь печатает. Но не хотим делать это после каждого события нажатия клавиши. Когда пользователь быстро печатает, нужно подождать, пока не произойдет пауза. Вместо немедленного выполнения действия в обработчике события мы устанавливаем задержку. Мы также очищаем предыдущую задержку (если таковая имеется ). Если события происходят через короткие интервалы времени (меньше, чем установленная нами задержка ), то задержка от предыдущего события отменяется:

Напечатайте что-нибудь здесь... var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log("Вы перестали печатать."); }, 500); });

Передача неопределенного значения для clearTimeout или его вызов для задержки, которая уже запущена, не даст никакого результата. Нам больше не нужно быть осторожными относительно того, когда его вызывать, мы просто делаем это для каждого события.

Можно использовать иной сценарий, если нужно разделить ответы небольшим промежутком времени. Но чтобы при этом они запускались во время серии событий, а не только после нее. Например, можно отправлять в ответ на события «mousemove » (JavaScript mouse events ) текущие координаты мыши, но только через каждые 250 миллисекунд:

function displayCoords(event) { document.body.textContent = "мышь находится в точке " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } });

Заключение

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

Каждое событие относится к определенному типу («keydown «, «focus » и так далее ), который идентифицирует его. Большинство событий вызывается для конкретного элемента DOM , а затем распространяются на родительские узлы элемента. Это позволяет обработчикам, связанным с этими элементами, обрабатывать их.

Когда вызывается обработчик, ему передается объект события с дополнительной информацией о действии. Этот объект также содержит методы, позволяющие остановить дальнейшее распространение события (stopPropagation ) или предотвратить обработку события браузером по умолчанию (preventDefault ).

Нажатие клавиш порождает события «keydown «, «keypress » и «keyup «. Нажатие мыши порождает события «mousedown «, «mouseup » и «click «. Перемещение мыши — «mousemove «, «mouseenter » и «mouseout «.

JavaScript scroll event можно определить с помощью события «scroll «, а смена фокуса — «focus » и «blur «. После завершения загрузки документа для окна возникает событие «load «.

Только одна часть JavaScript программы может работать одновременно. Обработчики событий и другие запланированные скрипты должны дожидаться, когда закончится выполнение других скриптов в очереди.

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

Такое простое событие, как onclick в javascript, может быть вызвано несколькими способами и скрыает некоторые тонкости. Событие происходит при клике по элементу левой кнопкой мыши. Стоит заметить, что при клике происходит так же ещё два события, а именно нажатие на кнопку мыши и её отжатие.

Все примеры будем рассматривать на теге «a» (ссылку). Пусть это не смущает, с другими тегами будет работать аналогичным образом.

Самый простой способ повесить событие onclick, это прописать его непосредственно в html теге:

Пример 1

Код в действии:

В примере при нажатии на ссылку появляется всплывающее окно с сообщением. Дополнительно к действию мы прописали «return false;». Это требуется чтобы предотвратить переход по ссылке после срабатывания события «onclick». В других элементах (где нет аттрибута href) это можно опустить.

Рассмотренный вариант можно использовать если событие содержит мало кода. Иначе, следует обратить внимание на другие способы.

Выносим код события onclick в javascript-функцию

Следующий способ хорош тем, что мы отделяем javascript-код от html тегов. В теге прописываем название функции, а саму функцию выносим в отдельный блок:

function ChangeColor(Element) { if (Element.style.color == "green") Element.style.color = "red"; else Element.style.color = "green"; return false; } Изменить цвет

Код в действии:

Но и здесь всё не идеально. Что делать, если событие требуется повесить на все ссылыки сайта, а их сотни? Кажется что это трудно, а на деле - меньше десяти строк кода. Задача решается с помощью селекторов. В примере опять будем производить действия с тегом «a», но ничего не мешает использовать вместо ссылки «img» или «div».

Вешаем onclick на элемент из javascript-кода

Рассмотим еще один способ, на мой взгляд, самый практичный и надежный. Хорош он тем, что событие можно повесить на множество элементов. Для этого требуется выбрать при помощи javascript-селекторов элементы, к которым требуется применить событие onclick.

//дожидаемся полной загрузки страницы window.onload = function () { //получаем идентификатор элемента var a = document.getElementById("switch"); //вешаем на него событие a.onclick = function() { //производим какие-то действия if (this.innerHTML=="On") this.innerHTML = "Off"; else this.innerHTML = "On"; //предотвращаем переход по ссылке href return false; } } On

Код в действии:

Выбору элементов по селекторам можно посвятить отдельную тему, могу сказать только то, что согласно новой спецификации HTML5, их выбор стал прост и в javascript. Если Вы знакомы с jquery или CSS, то выбрать нужные элементы для Вас не составит труда. Например, так просто можно выбрать все элементы с классом «link» и повесить на них нужное действие:

//выбираем нужные элементы var a = document.querySelectorAll(".link"); //перебираем все найденные элементы и вешаем на них события .forEach.call(a, function(el) { //вешаем событие el.click = function(e) { //производим действия } });

Применяем jQuery

Если в проекте используется библиотека jQuery, то можно ещё упростить код. Рассмотрим два самых распространенных способа:

$(function(){ $(".link").click(function() { //действия }); });

И ещё один вариант, который идентичен предыдущему.

$(function(){ $(".link").on("click", function(){ //действия }); });

С обработчиком «on()» лучше ознакомиться отдельно, так как он несет в себе много полезного функционала. Например, возможность указать через пробел несколько событий к которым будет применяться действие, делегировать события на дочерние элементы, а так же он полезен если необходимо повесить событие на динамически добавляемые элементы, которых изначально нет на странице.

Рассмотрим наиболее стандартные и часто используемые javaScript события:

Обработчик
события

Поддерживающие HTML- элементы и объекты

Описание

Получение элементом фокуса

a, area, button, input,
label, select, textarea

Потеря текущим элементом фокуса. Возникает при
щелчке мышью вне элемента либо нажатии клавиши табуляции

Input, select, textarea

Изменение значений элементов формы. Возникает после потерей элементом фокуса, т.е. после события blur

Практически все

Одинарный щелчок (нажата и отпущена кнопка мыши)

a, area, button, input, label, select, textarea

Практически все

Нажата кнопка мыши в пределах текущего элемента

Практически
все

Курсор мыши выведен за пределы
текущего элемента

Практически все

Курсор мыши наведен на текущий элемент

Практически все

Отпущена кнопка мыши в пределах текущего элемента

Перемещение окна

Изменение размеров окна

Выделение текста в текущем элементе

Отправка данных формы

Попытка закрытия окна браузера и выгрузки документа
Событие onLoad. Свойства высоты и ширины объекта в javaScript

Для выполнения следующего примера нам понадобится новое понятие — событие.

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

Рассмотрим одно из самых распространенных событий — onload — которое происходит при загрузке документа (когда пользователь своими действиями вызвал загрузку веб-страницы).

Рассмотрим пример использования события javascript onload для изменения ширины и высоты элемента.

Пример: Добавить на страницу изображение и при помощи javascript при наступлении события загрузки страницы сделать ширину изображения соответствующей ширине окна браузера

function resizeImg() { var myImg= document.getElementById ("img1" ) ; myImg.style .width = document.body .clientWidth ; } ...

function resizeImg(){ var myImg=document.getElementById("img1"); myImg.style.width=document.body.clientWidth; } ...

В примере основные действия происходят в функции resizeImg() :

  • переменная myImg ассоциирована с тегом img — картинкой, свойство которой width — ширина — меняется в самой функции.
  • Вызов функции происходит по загрузке страницы в событии onload тела документа (тело — body — главный элемент, поэтому загрузка страницы — это событие, относящееся к телу).

    • Задание Js8_4. Разместите в html-коде несколько изображений (тег img). Используя метод измените:
    — размер (свойства width и height) всех изображений страницы
    — размер границы (свойство border) всех изображений.
    Дополните код:

    var allImg=document...; // получаем массив изображений for (var i=0; i < allImg.length; i++){ allImg[i].....; // меняем свойство width ...; // меняем свойство height ...; // меняем border }

    Событие onclick javaScript и три способа обработки событий

    Событие onClick происходит во время одинарного щелчка кнопкой мыши . Обработать событие, т.е. отреагировать на него посредством скрипта, можно тремя способами. Рассмотрим их:

    Пример: По щелчку на кнопке вывести диалоговое окно с сообщением «Ура!»

  • Через свойство объекта с использованием пользовательской функции:

    • Скрипт:

    В данном примере в html-коде мы видим кнопку. У кнопки присутствует атрибут onclick («по щелчку» ), в значении которого стоит вызов функции с названием message() . Это пользовательская функция, описанная выше в скрипте. В самой функции выводится диалоговое окно, что и задано согласно заданию.

    Скрипт при такой обработке события обычно находится в области head документа


  • Через атрибут тега:

    • Это упрощенный вариант обработки события, он подходит только для небольшого кода, когда необходимо выполнить один-два оператора. Иначе код будет плохочитаемым.
    В качестве атрибута кнопки указывается onclick («по щелчку» ), а в качестве значения пишется скрипт из операторов с указанием на каком языке он написан (javascript:). В нашем случае оператор для вывода модального окна со словом «Ура!»

  • Через регистрацию функции-обработчика в качестве свойства элемента:

    • html-код:

    Скрипт:

    document.myForm .myButton .onclick = message; function message() { alert("Ура!" ) ; }

    document.myForm.myButton.onclick = message; function message() { alert("Ура!"); }

    В html-коде здесь присутствует кнопка с атрибутом id , который необходим для обращения к кнопке через скрипт.

    В скрипте, который обязательно находится ниже дерева элементов (можно перед закрытием тега body), находится обращение к кнопке (document.myForm.myButton), для которой назначается обработчик события onclick со значением ссылки на функцию . Обращение к кнопке может быть организовано через атрибут id (document.getElementById("myButton").onclick = message;)

    Скобки после названия функции message не ставятся. В данном случае это именно ссылка на функцию, иначе, при использовании скобок, функция была бы вызвана, а не назначена в качестве обработчика событий.

    Именно такой способ обработки событий максимально приближен к тому, который происходит, например, в ОС windows.

    Задание Js8_5. Выполните задание по инструкции:

  • Создайте веб-страницу и расположите на ней тег img с изображением грустного смайлика
  • Щелчок на изображении (onclick) вызывает заданный метод (пользовательская функция):

  • В скрипте опишите метод (функция sayHello()), который спрашивает, как зовут пользователя, а затем приветствует его по имени, и меняет изображение на улыбающийся смайлик (свойство src тега img):

    • Зеленый
    … seagreen
    … magenta
    … purple
    … navy
    … royalblue

    Задание Js8_7. Создание rollover-изображения

    — Добавьте в код тег img с изображением.
    — Введите обработчики событий onmouseover (по наведению) и onmouseout (при отведении). Сделайте это в виде функций.
    onmouseover процедуру загрузки в тег img другого изображения.
    — Присоедините к обработчику событий onmouseout процедуру загрузки другого изображения в тег img .

    onСlick - это событие № 1 на экране пользователя.
    onСlick - это клик (или щелчок) пользователя по объекту.
    После каждого такого onclick-а пользователя, должно происходить ответное действие на экране. Так достигается интерактивность интерфейса и подтверждается главный принцип общения компьютера с человеком - клик, ответ, клик, ответ.
    На пользовательском жаргоне, событие onСlick может назваться как угодно. Как только рядовые пользователи не называют этот бедный onСlick - клацнуть, дёрнуть, кликнуть, щёлкнуть, бацнуть и т.д. … Но, суть от этого не меняется годами - если пользователь проявил активность на экране и кликнул по объекту, то - компьютер должен ему (пользователю) адекватно ответить. Это и есть onСlick .

    onclick в HTML

    Событие onСlick в любом языке имеет первостепенное значение. И, HTML сему не исключение. Оно и вестимо. Действительно, уж если после клика (onСlick ) по элементу в браузере ничего не происходит - зачем тогда вообще, что-либо программировать на сайте? Так что, onСlick - желанный гость на любом интернет-экране (или экранчике).
    Теперь, ближе к теме. Если говорить более конкретно, то наш onСlick по страничке сайта, в браузере - это событие из Ява-скрипт, для которого HTML служит всего лишь каркасом размещения кода его конструкций. И, с точки зрения валидности кода этого самого HTML - правильно будет писать onclick , а не onСlick (как привыкли многие прикладные программисты). Потому что, в HTML все теги и конструкции пишутся только в нижнем регистре.

    Нет верхнего регистра в HTML. Нет, и всё тут!!! А тем «злыдням», которые пишут в HTML в верхнем регистре, в старые добрые времена было принято рубить руки по самые колени. Более того. Говорят, что при батюшке-царе Иоанне Грозном, за запись в HTML, вида или можно легко было угодить, если не на кол, так на виселицу. Это абсолютно точно. Щас, конечно - царедворцы и правители пошли поспокойнее. Тем не менее, при написании любого кода нужно соблюдать, хотя-бы видимость приличия. С этого места и начинается повествование о правильном онклике .

    Итак, решено и доказано (для HTML).
    Первым делом, пишем onclick , а не onСlick !!!

    МЕНЮ №1
    или
    МЕНЮ №1

    Что означают сии бредовые строчки, мы будем разбираться несколько позже, а пока…
    - Принципиально, событие onclick из Ява-скрипт в HTML можно навесить на любой элемент кода HTML-страницы, будь то ,

    Или . Браузер всё «сожрёт», и всё будет работать. Вот только, доступ к элементу с клавиатуры возможен исключительно для ссылко- или кнопко- объекта. И, если предположить на мгновение, что у пользователя нет мыши и он работает исключительно с клавиатуры, то всё к чему он сможет соприкоснуться на сайте - это будут только кнопки или ссылки. Третьего не дано! Поэтому, «навешивать» событие onclick на объекты, недоступные с клавиатуры - просто некрасиво. Ну, не по-человечески, как-то это. Из сего выплывает второе правило для onclick в HTML - это событие нужно подключать только к ссылке (тег «а») или к кнопке (тег «button»). В противном случае, код работать всё-таки будет, но в аду, для таких программистов - заготовлена отдельная большая сковорода.
    Поскольку, (в HTML) форматирование и работа с кнопками («батонами») вызывает определённые трудности, то единственным, универсальным и оптимальным вариантом остаётся только ссылка (тег «а»). Но, и с этим тегом - не всё так гладко. Теперь, возвращаемся к разбору с нашей строчкой кода:

    МЕНЮ №1

    Выбрасываем из обсуждения тайтл ссылки, как совершенно очевидную вещь. Остаётся,
    МЕНЮ №1
    Вся дальнейшая писчая лабуда будет связанна с темой блокировки атрибута href , который нужно правильно «парализовать», чтобы ссылка перестала быть рабочей ссылкой, но тем не менее - выполняла функции onclick .

    return false;

    return false ; - это прямая блокировка атрибута href. Если у пользователя в браузере разрешён Ява-скрипт, то будет выполнен вызов события onclick из соответствующего скрипта, а не переход по ссылке. Т.е., чтобы при клике по «ссылке вызова» не было сразу перехода по адресу из href, в onclick добавляется событие return false; и предполагается, что сначала исполнится функция, которая отменит переход по ссылке, если javascript включен. Таким образом, содержание атрибута href не имеет никакого значения, поскольку оно игнорируется при выполнении ява-скрипта.

    Но вот вопрос. А что будет, если у пользователя в его браузере запрещён (выключен) Ява-скрипт? Как тогда поведёт себя наша ссылочка? Не буду интриговать, а сразу выложу возможные варианты развития событий - возможные значения атрибута href и соответствующего поведения браузера после клика по такой ссылке при выключенном Ява-скрипт.
    Конечно, если javascript выключен в браузере у пользователя - так это одна беда и неурядица. Если выполнение Ява-скриптов выключено (запрещено) в браузере у пользователя, то тогда начинаются сплошные проблемы с атрибутом href , поскольку тег «а», это - всё-таки ссылка и браузер будет пытаться осуществить по ней переход.

    Совсем выкинуть атрибут href из состава ссылки нельзя. Без атрибута href в тексте ссылке обойтись никак не возможно и любой валидатор сразу обидится за такое надругательство над её пряным и нежным телом. Значит, тогда остаётся один единственный вариант - наполнить атрибут href удобоваримым содержимым. Тут возможно следующее: оставить href совершенно пустым, заполнить его знаком диеза «#» или выражением javascript:// . При выключенном (или заглюканном) Ява-скрипт, после клика по таким ссылкам будет происходить следующее:

    Проба Атрибут href пустой. После клика по такой ссылке, будет просто перезагружена страница в браузере. Проба Атрибут href имеет значение "#". После клика по такой ссылке, пользователя выбросит в начало страницы, без её перезагрузки. Проба Атрибут href имеет значение "javascript://". После клика по такой ссылке, ничего не произойдёт. href="javascript://" - клик по ссылке будет просто проигнорирован браузером. Значение "javascript://" для атрибута href - это и есть стандартная «заглушка» для блокировки ссылки при выключенном Ява-скрипте.

    href="javascript://" - туфта!

    Почему туфта? Потому что, интернет-жизнь в мире поисковых систем вносит свои коррективы. С точки зрения правильной и семантической! вёрстки, абсолютно логичным будет записать в атрибут href реальную ссылку и добавить реальный тайтл для этой ссылки. Тогда, после клика по такой ссылке произойдёт одно из двух: либо, будет выполнено событие onclick из соответствующего Ява-скрипта, либо состоится переход по реальной ссылке на реальную страницу, (если Ява-скрипт отключён или заглюкал/недогрузился).

    Таким образом, подведём итоги. В ссылке вызова события Ява-скрипт, в href помещаем реальную ссылку на реальную страницу для перехода при выключенном javascript, а в onclick - функцию, вызывающую запрос выполнения скрипта при включённом Ява-скрипт.

    Иными словами, в «href» должна находиться совершенно нормальная и рабочая ссылка на любую веб-страницу, куда будет перенаправлен пользователь при клике по «ссылке вызова события» при выключенном Ява-скрипт, и которая будет игнорироваться скриптом при включенном Ява-скрипт. Вот и всё …

    Ну, и под конец -

    Проверка браузера на включение/выключение Ява-скрипт

    Стандартный код такой проверки выглядит так:
    У Вас отключён javascript...
    Где, для можно прописать в CSS любые стили, кроме display:none; и ему подобных стилей... Браузер ОБЯЗАТЕЛЬНО!!! выведет это сообщение на экран, в случае отключения пользователем Ява-скрипта в своём браузере. Таким нехитрым способом, Web-мастера часто пишут: "Включите, пожалуйста, javascript", либо выводят какие-то красивые картинки с аналогичной просьбой, либо ещё что-нибудь... Внутри тега noscript можно помещать любые HTML-теги. И, это - вовсе не лишняя предосторожность. Несмотря на то, что сейчас не так просто найти сайт, который бы вообще не использовал javascript.

    Кто не с нами, тот против нас
    Проблему с выключенным в браузере Ява-скрипт можно, вообще - решить радикально и кардинально. Например, добавить внутрь секции код HTML5, вида:




    где, http://mysite.ru/ - это веб-страница, куда сразу перенаправляется
    пользователь при выключенном в браузере Ява-скрипт.