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
Комментарии —
  1. avatar varnak 20 июня 2018, 17:22 #
    статья помогла спс.
    дайте код приведения (или сслыку)
    1. avatar Simkin Andrew 22 июня 2018, 11:27 #
      я не верю в привидения
      1. avatar Vladimir 04 августа 2018, 00:50 #
        еба я пересрался.
    2. avatar Дед 02 июня 2018, 17:37 #
      Добрый день, уважаемый.
      Сколько не бьюсь, не могу решить такую проблему: первых два onClick работают нормально — замещая друг друга. Как сделать, что бы все работали также? Для примера привожу выбор из 4, на самом деле мне нужно 10 кнопок. Неужели, нужно прописывать на закрытие все 10?

      <div style="border:5px solid #000;width:600px;background-color: #fff;margin:5px auto;padding:5px;">
          <div style="margin:5px;text-align:center;">
       <input type="submit" name="" value="1111111" onClick="if (document.getElementById('obm1').style.display=='none') {document.getElementById('obm1').style.display='block'; document.getElementById('obm2').style.display='none'; document.getElementById('addform').style.display='none';} else {document.getElementById('obm1').style.display='none';}">   
       <input type="submit" name="" value="2222222" onClick="if (document.getElementById('obm2').style.display=='none') {document.getElementById('obm2').style.display='block'; document.getElementById('obm1').style.display='none'; document.getElementById('addform').style.display='none';} else {document.getElementById('obm2').style.display='none';}">  
       <input type="submit" name="" value="3333333" onClick="if (document.getElementById('obm3').style.display=='none') {document.getElementById('obm3').style.display='block'; document.getElementById('obm1').style.display='none'; document.getElementById('addform').style.display='none';} else {document.getElementById('obm3').style.display='none';}">
       <input type="submit" name="" value="4444444" onClick="if (document.getElementById('obm4').style.display=='none') {document.getElementById('obm4').style.display='block'; document.getElementById('obm1').style.display='none'; document.getElementById('addform').style.display='none';} else {document.getElementById('obm4').style.display='none';}">
          </div>
              <!------ obm1 ------>
              <div id="obm1" style="display:none;text-align:center;border:4px solid #000;padding:10px;background:#ccf;">111111111111111</div>
              <!------ /// obm1 ------><!------ obm2 ------>
              <div id="obm2"  style="display:none;text-align:center;border:4px solid #000;padding:10px;background:#cfc;">22222222222222222222</div>
              <!------ /// obm2 ------><!------ obm3 ------>
              <div id="obm3" style="display:none;text-align:center;border:4px solid #000;padding:10px;background:#fcc;">3333333333333333333333333</div>
              <!------ /// obm3 ------><!------ obm4 ------>
              <div id="obm4"  style="display:none;text-align:center;border:4px solid #000;padding:10px;background:#ffc;">4444444444444444444444444444444444444444444</div>
              <!------ /// obm4 ------>
      </div>
      С уважением, Дед.
      1. avatar Simkin Andrew 02 июня 2018, 18:29 #
        Добрый день.
        Совет, не пиши стили в атрибуте style. Для стилей давно придумали такую замечательную вещь, как CSS.

        Второй совет, лучше использовать для твоих целей jquery библиотеку, тогда весь js код уместится строчки в 4. Пример, как это работает, есть в статье.

        Но если нужно всё же на чистом javascript, то лучше всем DIV-ам прсвоить один и тот же класс и перед display=block сначала скрывай все элементы с этим классом, а потом уже показывать нужный:
        var myDiv = document.querySelectorAll('.myDiv');
        myDiv.style.display='none';
        document.getElementById('obm1').style.display='block';
        1. avatar Дед 02 июня 2018, 22:00 #
          Не совсем понял с общим классом всем DIV-ам, а как же потом выбирать нужный? Если можно напишите все в моем примере, что бы все таки понял.
          Стили в атрибуте style написал только для примера, они прописаны в файле .css
          Будьте здоровы.
          1. avatar Simkin Andrew 03 июня 2018, 09:23 #
            Я в примере написал onClick для первой кнопки. Нужный выбирается затем так же по ID. Остальные аналогично. Если не понятно, то лучше сначала почитай какой-нибудь самоучитель по Jquery, сильно поможет в разработке.
        2. avatar varnak 20 июня 2018, 17:21(был изменён) #
          не туда
        3. avatar Иван 10 мая 2018, 21:21 #
          Добрый день. Можно ли применять с .load('somefile.htm #material1')
          Но, чтобы каждая ссылка при нажатии, выводила содержимое в один и тот же id на странице, при нажатии на другую ссылку предыдущее скрвалось. Я читал, что это как-то делается обработчиками .on и .off, .trigger, пока я добился лишь такого единичного результата:
          $('#your-tab-id-3').on('click', 'a.import', function(e) {
          $('#info').load('materials_ajax.html #zhakard');
          $('#info').addClass('img-thumbnail');
          return false;
          });

          Это наверно бред
          $('a.import').get(0).click();
          $('#info').load('materials_ajax.html #zhakard');
          $('a.import').get(1).click();
          $('#info').load('materials_ajax.html #multibonnel');
          $('a.import').get(2).click();
          $('#info').load('materials_ajax.html #cocos');
          $('a.import').get(3).click();
          $('#info').load('materials_ajax.html #otdush');
          Подскажите в какую сторону копать?
          1. avatar Simkin Andrew 11 мая 2018, 10:06 #
            Слишком сложно, не могу понять что есть и что надо.
            Судя по описанию вообще ты что-то хочешь сделать какими-то странными способами.
          2. avatar Павел Иванов 01 апреля 2018, 01:22 #
            Я чуть не обделался от привидения ахахаха…
            1. avatar Simkin Andrew 01 апреля 2018, 21:56 #
              С первым апреля :)
              1. avatar Нина 09 апреля 2018, 15:35 #
                А как вызвать привидение? Оно такое классное…
                1. avatar Simkin Andrew 09 апреля 2018, 16:43 #
                  Само прилетает когда захочет попугать :)
            2. 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   2018 г.
                            Страница сгенерирована: 0,2004 s | 10 mb.
                            На каком уровне Вы играете в шахматы?
                            О П Р О С
                            Home Question Top