RealAdmin.ru

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

JavaScript,jQuery
Категория: Кодинг
13 июл 2014 г. в 22:55

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

событие onclick в javascript

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

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

<a href="#" onclick="alert('Пример 1 сработал'); return false;">Пример 1</a>

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

Нажмите на ссылку: Пример 1

В примере при нажатии на ссылку появляется всплывающее окно с сообщением. Дополнительно к действию мы прописали «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».

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

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

<script>
//дожидаемся полной загрузки страницы
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;
    }
}
</script>

<a id="switch" href="#">On</a>

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

Нажмите на ссылку: 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()» лучше ознакомиться отдельно, так как он несет в себе много полезного функционала. Например, возможность указать через пробел несколько событий к которым будет применяться действие, делегировать события на дочерние элементы, а так же он полезен если необходимо повесить событие на динамически добавляемые элементы, которых изначально нет на странице.

Теги:
Посмотрите похожее — 6
Комментарии — 15
  1. avatar Евгений 08 июля 2017, 09:39(был изменён) #
    Скажите, а получится данный способ использовать, чтобы назначить событие клик по определенной кнопке, с целью передачи этого события в Яндекс.Метрику и Google Analitycs?
    Я совсем не знаю javascript, но насколько понимаю, для этого у кнопки должен быть указан id? Если у кнопки нет id получится ли как-то назначить событие для определенных кнопок?

    Вкратце, объясню зачем мне это: я интернет-маркетолог и у меня есть доступ только к админке modx, в которой я не могу назначить id для кнопок, но теоретически мог бы использовать этот код и вставить его в другую часть кода страницы, чтобы передавать данные о клике на кнопку «Оставить заявку» в систему Яндекс.Метрики для анализа источников, с которых пришли посетители оставившие заявки на сайте.
    1. avatar Simkin Andrew 09 июля 2017, 10:59 #
      Можно без id настроить. Необходимо изучить что такое jquery селекторы, найти уникальный селектор этой кнопки и повесить на него то же событие:
      $("селектор кнопки").on("click", function(){
         // отправка целей
      });
      Но есть вероятность что это событие уже где-то определено, и в нём прописано return false. Тогда второе подобное событие может не сработать и потребуется придумывать другие способы.
    2. avatar Trizna 07 июля 2017, 02:29 #
      Друзья, как такое может быть?

      Делаю скрипт и одна и та же функция вот так работает:
      <div onclick="Func('Blabla');">Click</div>
      и так тоже работает:
      <span onclick="Func('Blabla');">Click</span>
      Но вот так эта же функция НЕ работет:
      <img src="img.png" onclick="Func('Blabla');" />
      и так тоже НЕ работает:
      <input type="button onclick="Func('Blabla');" value="Click" />
      Как такое может быть?
      1. avatar Simkin Andrew 07 июля 2017, 13:07 #
        В последнем примере явно ошибка в синтаксисе. onclick занесено в атрибут type. С картинкой — вроде всё в порядке, но есть ощущение что ошибка в том что сначала идёт картинка, а только потом объявляется функция. Или что-то перебивает событие onclick. Необходимо смотреть непосредственно на сайте.
      2. avatar Vladimir 13 апреля 2017, 22:37(был изменён) #
        Можно ли осуществить такое?
        Есть ссылка на странице1, пользователь кликает по ней в фоновом режиме открывается страница2, этой ссылки, а на странице1 на месте ссылки появляется другой текст.
        1. avatar Simkin Andrew 14 апреля 2017, 09:13 #
          Браузеры не поддерживают открытие страниц в фоновом режиме. Если имеется ввиду, в новой вкладке, то да — так можно.
          1. avatar Владимир 14 апреля 2017, 17:57 #
            можно привести пример
            1. avatar Simkin Andrew 17 апреля 2017, 08:52 #
              Вообще в статье уже есть примеры. Что-то такое:
              var a = document.getElementById('switch');
                  a.onclick = function() {
                      window.open('http://example.com');
              	this.innerHTML = 'другой текст';
                      return false;
                  }
        2. avatar Egor 16 декабря 2015, 11:09 #
          а я час просидел нечего понять не мог, не работал $(#blabla),click(blala)
          не работал bind. а эллемент из подгружаемого шаблона,,,, как так!!! думал я, что за фигня такая. Оказывается через .on() нужно и ровно после innrhtml or append. Но все же вопрос. может лучше в html указывать onclick=«blabla()»??
          Согласен что можено повесит событие по классу, но блин читая хтмл не совсем ясно кто что где вызывается и какую далее функцию смотреть, только по id а там искать в js где и как этот id используется. вот такой у меня сложный вопрос.
          1. avatar Simkin Andrew 16 декабря 2015, 11:15 #
            bind это устаревший метод, ему на замену пришел on. Обычно берется, создается один файл script.js, подключается ко всем страницам и там пишутся все скрипты. Пихать их в код самого сайта — плохой тон. А чтобы всё быстро находить — пишите подробные комментарии к каждому скрипту.
          2. avatar tasman992 15 декабря 2015, 23:42 #
            Можем ли мы передать функции значение не только this?
            1. avatar Александр 08 декабря 2015, 12:54 #
              Статья замечательная! На свой вопрос, ответ получил.
              1. avatar Александра 18 ноября 2015, 18:36 #
                Просто супер статья, спасибо!
                1. avatar Simkin Andrew 20 ноября 2015, 22:08 #
                  спасибо за положительный отзыв
                  1. avatar Сергей 20 августа 2016, 18:43 #
                    Статья и правда супер!!!
                  © REALADMIN.RU   2017 г.
                  Страница сгенерирована: 0,1169 s | 10 mb.
                  На каком уровне Вы играете в шахматы?
                  О П Р О С
                  Home Question Top