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

В данном уроке мы с вами разберем все способы работы с событиями в JavaScript.

События через атрибуты

Вы уже хорошо знаете первый способ привязать событие к элементу - с помощью атрибута, например onclick (если вы не помните этого или пропустили - см. урок основы работы с событиями JavaScript).

Напомню еще раз этот способ на примере: сейчас по клику на кнопку сработает функция func , которая выводит на экран alert :

Задания события через атрибут имеет свои недостатки: если, к примеру, я хочу ко всем инпутам на странице привязать определенное событие - мне придется полазить по HTML странице, найти все инпуты и каждому добавить атрибут с событием. Это не очень удобно и хотелось бы иметь под рукой более продвинутый способ работы с событиями.

Поэтому давайте посмотрим, что еще нам может предложить JavaScript при работе с событиями.

События через работу с атрибутами

По сути атрибут onclick является таким же атрибутом, как, к примеру, value . И, если мы могли менять атрибут value таким образом - elem.value , то точно также мы можем менять атрибут onclick .

Если мы сделаем так: elem.onclick = func , то привяжем к элементу elem функцию func . Посмотрите пример и под ним мы обсудим все нюансы этого способа:

var elem = document.getElementById("test"); elem.onclick = func; function func() { alert("!"); }

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

Я уверен, что прочитав это, вы не до конца поймете то, что я хотел вам донести, поэтому запустите пример и еще раз перечитайте предыдущий абзац. Вот пример:

//Функция возвращает строку "!" function func() { return "!"; } alert(func()); //вы увидите строку "!" alert(func); //а сейчас вы увидите исходный код функции func!

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

Кстати, результатом функции func() будет undefined , так как у нее нет команды return . Напомню код функции, о которой идет речь:

function func() { alert("!"); }

Давайте вспомним метод setInterval (см. урок работа с таймерами в JavaScript), когда мы использовали его таким образом window.setInterval(timer, 1000) - в этом случае мы также писали функцию timer без круглых скобок, потому что нас интересовал не результат работы функции, а ее код .

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

Достоинства и недостатки такого способа

Давайте теперь обсудим достоинства и недостатки этого способа.

Достоинства

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

Давайте сделаем это. Получим все инпуты с помощью getElementsByTagName и в цикле привяжем каждому такое событие: пусть по клику каждый инпут выдает алертом текст "!":

/* Этот код будет запускаться по загрузке страницы. Напоминаю, что писать его нужно после HTML кода. */ var elems = document.getElementsByTagName("input"); for (var i = 0; i < elems.length; i++) { elems[i].onclick = func; } function func() { alert("!"); }

Теперь нажатие на любой инпут будет приводить к тому, что будет срабатывать функция func , которая алертом выводит "!".

Использование this

Давайте усложним задачу и сделаем так, чтобы alert выводил содержимое атрибута value того инпута, на который кликнули мышкой.

Для этого нужно воспользоваться this , только не так, как мы это делали раньше. Раньше, когда мы писали событие прямо в атрибут, мы делали так: onclick="func(this)" , однако сейчас вот так - elems[i].onclick = func(this) - мы сделать не можем .

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

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

Вы можете спросить, почему тут - onclick="func()" - в функции написаны круглые скобки, хотя по логике там тоже требуется исходный код, а не результат. Об этом вы узнаете в уроке про анонимные функции чуть позже.

Так как правильно использовать this в нашей конструкции elems[i].onclick = func ? На самом деле тут this доступен внутри функции func и он ссылается на тот элемент, в котором возникло событие, вызвавшее эту функцию. То есть, если я делаю клик по первому инпуту - в this будет лежать ссылка на него, а если по второму - то на него.

В данном случае считайте, что this - это будто переменная elem , полученная через getElementById . К примеру, elem.value позволяет обратиться к атрибуту value , значит this.value будет делать то же самое.

Итак, давайте все-таки решим нашу задачу - сделаем так, чтобы alert выводил содержимое атрибута value того инпута, на который кликнули мышкой:

< elems.length; i++) { elems[i].onclick = func; } function func() { alert(this.value); //изменение только здесь }

Учтите, что если вы попытаетесь воспользоваться this внутри функции, которая была прописана прямо в атрибуте (то есть первым способом задать событие) - у вас ничего не выйдет. Смотрите пример неправильного кода:

function func() { alert(this.value); //не выведет ожидаемого }

В данном случае контекст выполнения таков, что this ссылается на window , а не на текущий элемент. Почему так - поговорим, когда вы разберете анонимные функции.

Напоминаю правильный вариант:

function func(elem) { alert(elem.value); //выведет содержимое атрибута value }

Недостатки

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

В следующем примере мы пытаемся привязать к событию onclick сразу две функции func1 и func2 . Однако по клику на элемент сработает только вторая функция, так как она затрет первую:

var elem = document.getElementById("test"); elem.onclick = func1; //тут мы сначала привязали func1 elem.onclick = func2; //а теперь func2 и func1 уже не привязана function func1() { alert("1"); } function func2() { alert("2"); }

В принципе, эту проблему легко обойти, если ввести еще и третью функцию func3. Привяжем к атрибуту onclick только func3, а она пусть вызывает func1 и func2 у себя внутри:

Как вы видите, этот недостаток не слишком существенный и его легко обойти. Только что вводится лишняя функция, что немного неудобно.

Однако, есть еще один недостаток - мы не можем легко отвязать от onclick, к примеру, только функцию func1, оставив func2 привязанным. Можно, конечно же, накрутить большие конструкции кода, однако это не нужно, если пользоваться еще более продвинутым способом привязать событие - через addEventListener. Давайте посмотрим, как с работать с этой функцией:

Работа с addEventListener

Метод addEventListener первым параметром принимает название события, а вторым - функцию, которую нужно привязать к этому событию. При этом имя события пишется без "on": "click" вместо "onclick", "mouseover" вместо "onmouseover" и так далее. Имя функции (второй параметр) пишется без кавычек и без круглых скобок (зачем это нужно, мы с вами уже разобрали выше).

Давайте сделаем так, чтобы по клику на кнопку вызывалась функция func:

var elem = document.getElementById("test"); elem.addEventListener("click", func); function func() { alert("!"); }

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

var elem = document.getElementById("test"); elem.addEventListener("click", func1); elem.addEventListener("click", func2); function func1() { alert("1"); } function func2() { alert("2"); }

Если вы скопируете этот код и запустите его у себя - сработает и функция func1, и функция func2.

Работа с this для addEventListener

Мы с вами уже разбирали работу с this в случае, если привязывать события вторым способом (через свойство элемента). В случае с addEventListener this работает аналогичным образом - он будет ссылаться на тот элемент, в котором случилось событие.

Давайте посмотрим на примере: привяжем к кнопке событие onclick , которое будет запускать функцию func . Эта функция будет выводить на экран value нашей кнопки:

var elem = document.getElementById("test"); elem.addEventListener("click", func); function func() { alert(this.value); }

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

var elem1 = document.getElementById("test1"); elem1.addEventListener("click", func); var elem2 = document.getElementById("test2"); elem2.addEventListener("click", func); function func() { alert(this.value); }

Здесь удобство работы с this в том, что не нужно создавать разные функции для разных элементов. Есть одна функция func , которая делает одно и то же, но для разных элементов и различаем мы их через this - на какой элемент кликнули - тот элемент и будет в this .

Ну, а сейчас получим массив кнопок с помощью getElementsByTagName и каждой из них привяжем функцию func.

var elems = document.getElementsByTagName("input"); for (var i = 0; i < elems.length; i++) { elems[i].addEventListener("click", func); } function func() { alert(this.value); }

Удаление привязки через removeEventListener

Сейчас мы с вами займемся тем, что будем удалять привязанные к событию функции. Что у нас будет получаться: если, к примеру, к событию onclick привязаны функции func1 и func2 , то мы сможем отвязать функцию func1, не затрагивая func2 и наоборот.

Давайте привяжем к элементу 3 функции: func1, func2 и func3, которые будут выводить на экран числа 1, 2 и 3:

А теперь сразу же после привязки отвяжем функции func1 и func2. Это делается с помощью метода removeEventListener , которая принимает те же параметры, что и addEventListener:

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

События JavaScript

В JavaScript, как и других объектно ориентированных языках, определен ряд событий, связанных с элементами документа. Обработчики дают возможность организовать реакцию на возникновение событий из сценария. При этом соответствующий обработчик указывается как атрибут элемента HTML-документа; значением этого атрибута является выражение JavaScript. Например,

- наведение и увод курсора мыши на элемент сопровождаются изменением цвета фона.

- при попытке пользователя закрыть окно и выгрузить документ выводится сообщение

- при щелчке мышью по изображению выполняется некая функция showPict()

Половина обработчиков поддерживаются практически всеми HTML-элементами (). Некоторые события можно имитировать с помощью соответствующих методов. Ниже приводится список событий согласно спецификации HTML 4.0 и некоторые события, поддерживаемые MS IE. Трактовка браузеров может отличаться от стандарта и в плане применимости обработчика к тем или иным элементам

Обработчик события	Поддерживающие HTML-элементы	Описание	Метод имитации
onAbort	IMG	Прерывание загрузки изображения
onBlur		Потеря текущим элементом фокуса, т.е. переход к другому элементу. Возникает при щелчке мышью вне элемента либо нажатии клавиши табуляции	blur()
onChange	INPUT, SELECT, TEXTAREA	Изменение значений элементов формы. Возникает после потерей элементом фокуса, т.е. после события blur	change()
onClick		Одинарный щелчок (нажата и отпущена кнопка мыши)	click()
onDblClick	Практически все HTML-элементы	Двойной щелчок
onError	IMG, WINDOW	Возникновение ошибки выполнения сценария
onFocus	A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA	Получение элементом фокуса (щелчок мышью на элементе или очередное нажатие клавиши табуляции)	focus()
onKeyDown	Практически все HTML-элементы	Нажата клавиша на клавиатуре
onKeyPress	Практически все HTML-элементы	Нажата и отпущена клавиша на клавиатуре
onKeyUp	Практически все HTML-элементы	Отпущена клавиша на клавиатуре
onLoad	BODY, FRAMESET
onMouseDown	Практически все HTML-элементы	Нажата кнопка мыши в пределах текущего элемента
onMouseMove	Практически все HTML-элементы	Перемещение курсора мыши в пределах текущего элемента
onMouseOut	Практически все HTML-элементы	Курсор мыши выведен за пределы текущего элемента
onMouseOver	Практически все HTML-элементы	Курсор мыши наведен на текущий элемент
onMouseUp	Практически все HTML-элементы	Отпущена кнопка мыши в пределах текущего элемента
onMove	WINDOW	Перемещение окна
onReset	FORM	Сброс данных формы (щелчок по кнопке )	reset()
onResize	WINDOW	Изменение размеров окна
onSelect	INPUT, TEXTAREA	Выделение текста в текущем элементе
onSubmit	FORM	Отправка данных формы (щелчок по кнопке )	submit()
onUnload	BODY, FRAMESET	Попытка закрытия окна браузера и выгрузки документа

В сотрудничестве с А. Параничевым.

Практически все JavaScript-приложения выполняют те или иные действия, откликаясь на различные события .

Событие - это сигнал от браузера о том, что что-то произошло.

Есть множество самых различных событий.

DOM-события, которые инициируются элементами DOM. Например, событие click происходит при клике на элементе, а событие mouseover - когда указатель мыши появляется над элементом,
События окна. Например событие resize - при изменении размера окна браузера,
Другие события, например load , readystatechange . Они используются, скажем, в технологии AJAX.

Именно DOM-события связывают действия, происходящие в документе, с кодом JavaScript, тем самым обеспечивая динамический веб-интерфейс.

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

Для того, чтобы скрипт реагировал на событие - нужно назначить хотя бы одну функцию-обработчик. Обычно обработчики называют "on+имя события" , например: onclick .

Нужно сразу отметить, что JavaScript - однопоточный язык, поэтому обработчики всегда выпоняются последовательно и в общем потоке. Это значит, что при установке обработчиков двух событий, которые возникают на элементе одновременно, например mouseover (мышь появилась над элементом) и mousemove (мышь двигается над элементом), их обработчики будут выполнены последовательно.

Существует несколько способов назначать обработчик на конкретное событие элемента. Все они представлены ниже.

Обработчик события можно указать в виде inline-записи, прямо в атрибуте onсобытие .

Например, для обработки события click на кнопке input , можно назначить обработчик onclick вот так:

Этот код в действии:

Можно назначить и функцию.

Например, пусть при клике на кнопку input запускается функция count_rabbits() . Для этого запишем вызов функции в атрибут onclick:

*!* function count_rabbits() { for(var i=1; i

Если на каждом из них будет свой обработчик события, например onclick , то обработчик для какого элемента будет вызван первым при клике, скажем, на d3 ?

Всего существует 2 модели поведения, они не имеют преимуществ между собой, но используют принципиально разные подходы. Стандарт W3C объединяет две модели в одну универсальную.

Всплывающие события (Bubbling)

В этой модели сначала будет выполнен обработчик на элементе 3, затем на элементе 2, и последним будет выполнен обработчик на элементе 1.

Такой порядок называется "всплывающим", потому что событие поднимается с самых "глубоких" элементов в представлении DOM, к самым "верхним", как пузырек воздуха в воде.

Визуально это выглядит так (кликните на вложенном элементе, чтоб увидеть, какой будет порядок обработки события):

Остановка всплытия

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

Если какой-то обработчик хочет остановить всплытие и не выпускать событие дальше вверх - это делает следующий код:

Element.onclick = function(event) { event = event || window.event // кросс-браузерно if (event.stopPropagation) { // Вариант стандарта W3C: event.stopPropagation() } else { // Вариант Internet Explorer: event.cancelBubble = true } }

Можно уложить блок if/else в одну строчку:

Event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true)

Перехват событий (Capturing)

Перехват - вторая, альтернативная всплытию модель порядка выполнения для события.

В этой модели сначала будет выполнен обработчик на элементе 1, затем - на элементе 2 и последним будет выполнен обработчик на элементе 3. Она называется "перехват", потому что родительские элементы могут обработать событие раньше, чем непосредственная цель события, как бы "перехватывая" обработку.

Визуально это выглядит так (кликните на вложенном элементе, чтоб увидеть, какой будет порядок обработки события, не поддерживается в IE):

Такой порядок был предложен Netscape и никогда не поддерживался в Internet Explorer, поэтому в IE вы не сможете увидеть этот пример в действии.

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

Порядок обработки в стандарте W3C

Решение от W3C объединяет обе модели: перехват и всплытие в одну универсальную.

При совершении действия, сначала событие перехватывается, пока не достигнет конечного элемента, затем всплывает.

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

Визуально это выглядит так (кликните на вложенном элементе, чтоб увидеть, какой будет порядок обработки события, не для IE):

Если в качестве третьего параметра функции addEventListener передать значение true , то событие будет срабатывать на фазе захвата, если false – то после окончания захвата, на фазе всплытия.

При установке обработчиков классическими методами (через свойство элемента или атрибут html тега) события всегда будут срабатывать на фазе всплытия.

Действие браузера по умолчанию

Браузер имеет своё собственное поведение по умолчанию для различных событий.

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

Element.onclick = function(event) { event = event || window.event if (event.preventDefault) { // Вариант стандарта W3C: event.preventDefault() } else { // Вариант Internet Explorer: event.returnValue = false } }

Вместо if/else можно записать одну строчку:

Event.preventDefault ? event.preventDefault() : (event.returnValue=false) ...

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

При клике перехода не произойдет, а рамка вокруг ссылки появится.

Код примера:

Var a = document.getElementById("my-focus-a") a.onfocus = a.onclick = function(e) { e = e || window.event // другая кроссбраузерная запись остановки события e.preventDefault ? e.preventDefault() : (e.returnValue=false) }

Смысл return false из обработчика

Возвращение return false из обработчика события предотвращает действие браузера по умолчанию, но не останавливает всплытие. В этом смысле следующие два кода эквивалентны:

Function handler(event) { ... return false } function handler(event) { ... if (event.preventDefault) { event.preventDefault() } else { event.returnValue = false } }

Заметим, что хотя даже если всплытие и действия по умолчанию остановлены, но другие обработчики на текущем элементе все равно сработают.

Elem = document.getElementById("TestStop") function handler(e) { e.preventDefault() // браузер - стоять e.stopPropagation() // событие - не всплывать return false // и вообще, мне больше ничего не надо } elem.addEventListener("click", handler, false) // следующий обработчик все равно сработает elem.addEventListener("click", function() { alert("А я сработало..") }, false);

Проверить:

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

Поэтому тем более один обработчик никак не может влиять на другие того же типа на том же элементе.

Резюме

Вы узнали...

Что такое события и как они работают.
Как назначать обработчики - от HTML до специальных методов.
Зачем нужен объект события и как его получить.
Как событие плывет в DOM-документе. Где можно поймать и как остановить.
Что такое и как предотвратить действие браузера по умолчанию.
Как с этим соотносится return false.

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

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/ - это веб-страница, куда сразу перенаправляется
пользователь при выключенном в браузере Ява-скрипт.

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

Что такое событие и обработчики событий

Событие - это некое действие, которое может производить либо пользователь, либо другие объекты на странице.

Самым ярким примером события это клик пользователя по какому-то объекту(click ), будь то это кнопка, ссылка или любой другой элемент. Другой пример события, это наведение мыши над каким-то объектом(mouseover ), скажем над изображением. Также событием является полное загрузка страницы(load ). В общем все действия, которые происходят на сайте являются событиями.

Так вот, мы можем захватить любое событие, которое производится на странице и обрабатывать её с помощью соответствующего обработчика. Например, при наведении мыши на какой-то блок div, мы можем вывести некое сообщение, допустим "Вы находитесь в текстовой области". Или, при клике по кнопке скрыть какой-то блок со страницы. В общем, много чего можно сделать пре обработки какого-то события.

И для того чтобы обрабатывать какое-то событие, необходимо использовать специальный обработчик для данного события. Каждое событие имеет свой обработчик, например, у события клик(click ) есть обработчик onclick . У события наведения мыши над объектом(mouseover ) есть обработчик onmouseover . И у события полной загрузки страницы(load ) есть обработчик onload .

То есть как вы поняли название обработчика , формируется из префикса "on" + название события.

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

Обработчик события вызывается в качестве атрибута, в самом теге HTML элемента. В значение обработчика можно написать сразу код JavaScript, но лучше вызывать какую-то функцию, которая сделает необходимые действия. Функцию необходимо описать внутри тега script, который может находится как внутри блока head, так и в конце тега body. В качестве параметра для этой функции передаётся слово this , то есть текущий объект.

Теперь напишем простой пример. При наведении мыши над блоком с текстом, выведем с помощью метода alert, сообщение о том что пользователь находится внутри текстовой области.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Div{ padding-left: 50px; width: 200px; border: 1px solid #000; }

JavaScript код:

Function blockOver(block){ alert("Вы находитесь в текстовой области "); }

Сохраняем документ, открываем его в браузере, наводим курсор мыши над текстом и видим результат обработки данного события:

Как получить значение атрибута в javascript ?

С помощью параметра функций (this), можно получить значение какого-то атрибута текущего объекта , например, узнать его id.

Для примера, создадим кнопку и зададим ей id со значением "justButton". Когда кликнем на данную кнопку, то выведем такое сообщение: "Вы кликнули по кнопке, с идентификатором значение_id". Здесь необходимо уже использовать обработчик onclick .

JavaScript код:

Function clickOnButton(button){ alert("Вы кликнули по кнопке, с идентификатором: " + button.id); }

Сохраняем документ, открываем его в браузере и кликаем по кнопке.

Таким же образом можно вывести имя кнопки(button.name ) или её значение(button.value )

Получаем значение ширины и высоты элемента

Ещё можно узнать значения CSS свойства элемента , например, ширину и высоту. Для получения ширины используются свойства clientWidth и offsetWidth , а для высоты clientHeight и offsetHeight . Для примера, выведем значения ширины и высоты кнопки, по которой кликнули.

Теперь содержимое функции clickOnButton будет такой:

Function clickOnButton(button){ //alert("Вы кликнули по кнопке, с идентификатором: " + button.id); var width = button.clientWidth || button.offsetWidth; var height = button.clientHeight || button.offsetHeight; alert("Ширина кнопки: " + width + "\nВысота кнопки: " + height); }

Результат данного примера:

Напоминаю, что ширина элемента считается вместе со значением padding, поэтому она и равна 111px [ 99px(width) + 6px(padding-left) + 6px(padding-right) ].

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

Например, при загрузке страницы можно вывести сообщение о том, что "страница загружается". Для этого необходимо использовать событие load и её обработчик onload . Данный обработчик напишем в открывающем теге body.

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

И в конец данной статьи разберём простой пример обработки формы. Обработка формы на JavaScript, во-первых, уменьшает загрузку на сервер и во-вторых придаёт дополнительный плюс к юзабилити сайта.

Форма состоится из одного поля для логина, и кнопки отправить. При отправке формы, будем проверять длину логина. Его длина должна быть больше трёх символов.

Начнём, мы с HTML структуры данной формы.

Теперь, тегу формы добавим в качестве атрибута обработчик onsubmit , события submit . Следующим образом:

Событие submit срабатывает при отправке формы. Оператора return мы написали для того чтобы запретить отправку формы, в случае обнаружения ошибки в вводе данных. Если функция вернёт значение false, то значение обработчика onsubmit будет «return false», это значит, что форма не отправиться на сервер. В противном случае, если форма вернёт true, то значение обработчика будет «return true» и форма отправится без проблем.

Иногда бывает необходимо чтобы полностью запретить отправку формы, в таком случае значение обработчика onsubmit будет таким:

Onsubmit = "checkForm(this); return false;"

Как Вы наверняка уже догадались, checkForm это название функции, которая вызовется, когда сработает событие submit. Вы можете назвать её как хотите, следуя правилам наименования функции.

И так, вернёмся к нашему примеру. Теперь нам необходимо описать функцию checkForm. В ней будет такое условие: если длина логина меньше трёх символов, то мы возвращаем false и форма не отправится, в противном случае, если данные были введены правильно, то, мы отправляем форму на сервер.

Function checkForm(form){ //Получаем значение поля формы, у которой name равен login var login = form.login.value; //Проверяем, если длина логина меньше трёх символов то выводим сообщение об ошибке и отменяем отправку формы. if(login.length > 3){ alert("Длина логина должна быть больше трёх символов"); return false; }else{ return true; } }

Сохраняем документ, открываем его в браузере и тестируем.

Таким вот образом можно проверить форму на языке JavaScript и отменить её отправку в случае ошибки.

Ну и на этом всё дорогие читатели. Подведём итоги.
События используются очень часто, поэтому Вы должны уметь работать с ними на все 100.

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

Задачи

Создайте простой калькулятор сложения цифр.

Создайте форму с двумя числовыми полями(type="number") для ввода чисел и кнопку с надписью "Сложить"
При нажатии на кнопку отправить, вызовите функцию обработки данного события.
Внутри функции получите значения полей и методом alert, выведите результат сложения введённых чисел.
Сделайте так чтобы форма не отправлялось после нажатия по кнопке.