Разбираем способы вызова события onclick в javascript на примерах
Опубликовано: 01.11.2017
13 июл 2014 г. в 22:55
Такое простое событие, как onclick в javascript, может быть вызвано несколькими способами и скрыает некоторые тонкости. Событие происходит при клике по элементу левой кнопкой мыши. Стоит заметить, что при клике происходит так же ещё два события, а именно нажатие на кнопку мыши и её отжатие.
Start Аndroid: Урок 36. Работа с базами данных SQLite. Метод query. Условие, сортировка, группировка
Все примеры будем рассматривать на теге «a» (ссылку). Пусть это не смущает, с другими тегами будет работать аналогичным образом.
Самый простой способ повесить событие onclick, это прописать его непосредственно в html теге:
Section 9
<a href="#" onclick="alert('Пример 1 сработал'); return false;">Пример 1</a>
Код в действии:
В примере при нажатии на ссылку появляется всплывающее окно с сообщением. Дополнительно к действию мы прописали «return false;». Это требуется чтобы предотвратить переход по ссылке после срабатывания события «onclick». В других элементах (где нет аттрибута href) это можно опустить.
Рассмотренный вариант можно использовать если событие содержит мало кода. Иначе, следует обратить внимание на другие способы.
Выносим код события onclick в javascript-функцию
Следующий способ хорош тем, что мы отделяем javascript-код от html тегов. В теге прописываем название функции, а саму функцию выносим в отдельный блок:
<script> function ChangeColor(Element) { if (Element.style.color == 'green') Element.style.color = 'red'; else Element.style.color = 'green'; return false; } </script> <a href="#" style="color: green;" onclick="return ChangeColor(this);">Изменить цвет</a>Код в действии:
Но и здесь всё не идеально. Что делать, если событие требуется повесить на все ссылыки сайта, а их сотни? Кажется что это трудно, а на деле — меньше десяти строк кода. Задача решается с помощью селекторов. В примере опять будем производить действия с тегом «a», но ничего не мешает использовать вместо ссылки «img» или «div».
Сегодня | Завтра | ||
USD | 32.62 | 32.50 | |
EUR | 39.90 | 39.92 |
Обменник | Переходов |
Wmchanger | 6 |
E-Market | 5 |
WMtoCash.com | 4 |
Str-Money | 3 |
Hot-Change | 3 |
Вы можете получить WMR-бонус в размере 0,01-0,10 WMR на свой кошелек 1 раз в сутки | |
Кошелек
|
|
Код
|
|
Обмен Webmoney |