Событие onclick в javascript и jquery на примерах

Такое простое событие, как onclick в javascript, может быть вызвано несколькими способами и скрыает некоторые тонкости. Событие происходит при клике по элементу левой кнопкой мыши. Стоит заметить, что при клике происходит так же ещё 2 события, а именно нажатие на кнопку мыши и её отжатие. Все примеры будем рассматривать на теге «a» (ссылку). Пусть это не смущает, с другими тегами будет работать аналогичным образом. Самый простой способ повесить событие onclick, это прописать его непосредственно в html теге:

Код в действии: нажмите на ссылку: Пример 1

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

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

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

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

Код в действии: нажмите на ссылку: Изменить цвет

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

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

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

Код в действии: нажмите на ссылку: Включено!

Выбору элементов по селекторам можно посвятить отдельную тему, могу сказать только то, что согласно новой спецификации HTML5 их выбор стал прост и в javascript. Если Вы знакомы с jquery или CSS, то выбрать нужные элементы для Вас не составит труда. Например, так просто можно выбрать все элементы с классом «link» и повесить на них нужное действие: <script>/*выбираем нужные элементы*/var a=document.querySelectorAll('.link');/*перебираем все найденные элементы и вешаем на них события*/[].forEach.call(a,function(el){/*вешаем событие*/el.click=function(e){/*производим действия*/}})</script>

Применяется jQuery

Если в проекте используется библиотека jQuery, то можно ещё упростить код. Рассмотрим 2 самых распространенных способа: <script>$(function(){$(".link").click(function(){/*действия*/})})</script>

И ещё 1 вариант, идентичный предыдущему: <script>$(function(){$(".link").on("click",function(){/*действия*/})})</script>

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

realadmin.ru/coding/onclick-js.html