RealAdmin.ru

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

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

Такое простое событие, как 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. Александра18 ноября 2015, 18:36#
    Просто супер статья, спасибо!
    1. Simkin Andrew20 ноября 2015, 22:08#
      спасибо за положительный отзыв
      1. Сергей20 августа 2016, 18:43#
        Статья и правда супер!!!
      2. Александр08 декабря 2015, 12:54#
        Статья замечательная! На свой вопрос, ответ получил.
        1. tasman99215 декабря 2015, 23:42#
          Можем ли мы передать функции значение не только this?
          1. Egor16 декабря 2015, 11:09#
            а я час просидел нечего понять не мог, не работал $(#blabla),click(blala)
            не работал bind. а эллемент из подгружаемого шаблона,,,, как так!!! думал я, что за фигня такая. Оказывается через .on() нужно и ровно после innrhtml or append. Но все же вопрос. может лучше в html указывать onclick=«blabla()»??
            Согласен что можено повесит событие по классу, но блин читая хтмл не совсем ясно кто что где вызывается и какую далее функцию смотреть, только по id а там искать в js где и как этот id используется. вот такой у меня сложный вопрос.
            1. Simkin Andrew16 декабря 2015, 11:15#
              bind это устаревший метод, ему на замену пришел on. Обычно берется, создается один файл script.js, подключается ко всем страницам и там пишутся все скрипты. Пихать их в код самого сайта — плохой тон. А чтобы всё быстро находить — пишите подробные комментарии к каждому скрипту.
            2. Vladimir13 апреля 2017, 22:37(был изменён)#
              Можно ли осуществить такое?
              Есть ссылка на странице1, пользователь кликает по ней в фоновом режиме открывается страница2, этой ссылки, а на странице1 на месте ссылки появляется другой текст.
              1. Simkin Andrew14 апреля 2017, 09:13#
                Браузеры не поддерживают открытие страниц в фоновом режиме. Если имеется ввиду, в новой вкладке, то да — так можно.
                1. Владимир14 апреля 2017, 17:57#
                  можно привести пример
                  1. Simkin Andrew17 апреля 2017, 08:52#
                    Вообще в статье уже есть примеры. Что-то такое:
                    var a = document.getElementById('switch');
                        a.onclick = function() {
                            window.open('http://example.com');
                    	this.innerHTML = 'другой текст';
                            return false;
                        }
              2. Trizna07 июля 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. Simkin Andrew07 июля 2017, 13:07#
                  В последнем примере явно ошибка в синтаксисе. onclick занесено в атрибут type. С картинкой — вроде всё в порядке, но есть ощущение что ошибка в том что сначала идёт картинка, а только потом объявляется функция. Или что-то перебивает событие onclick. Необходимо смотреть непосредственно на сайте.
                2. Евгений08 июля 2017, 09:39(был изменён)#
                  Скажите, а получится данный способ использовать, чтобы назначить событие клик по определенной кнопке, с целью передачи этого события в Яндекс.Метрику и Google Analitycs?
                  Я совсем не знаю javascript, но насколько понимаю, для этого у кнопки должен быть указан id? Если у кнопки нет id получится ли как-то назначить событие для определенных кнопок?

                  Вкратце, объясню зачем мне это: я интернет-маркетолог и у меня есть доступ только к админке modx, в которой я не могу назначить id для кнопок, но теоретически мог бы использовать этот код и вставить его в другую часть кода страницы, чтобы передавать данные о клике на кнопку «Оставить заявку» в систему Яндекс.Метрики для анализа источников, с которых пришли посетители оставившие заявки на сайте.
                  1. Simkin Andrew09 июля 2017, 10:59#
                    Можно без id настроить. Необходимо изучить что такое jquery селекторы, найти уникальный селектор этой кнопки и повесить на него то же событие:
                    $("селектор кнопки").on("click", function(){
                       // отправка целей
                    });
                    Но есть вероятность что это событие уже где-то определено, и в нём прописано return false. Тогда второе подобное событие может не сработать и потребуется придумывать другие способы.
                  2. Павел Иванов01 апреля 2018, 01:22#
                    Я чуть не обделался от привидения ахахаха…
                    1. Simkin Andrew01 апреля 2018, 21:56#
                      С первым апреля :)
                      1. Нина09 апреля 2018, 15:35#
                        А как вызвать привидение? Оно такое классное…
                        1. Simkin Andrew09 апреля 2018, 16:43#
                          Само прилетает когда захочет попугать :)
                    2. Иван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. Simkin Andrew11 мая 2018, 10:06#
                        Слишком сложно, не могу понять что есть и что надо.
                        Судя по описанию вообще ты что-то хочешь сделать какими-то странными способами.
                        1. Михаэль Вейк25 февраля 2019, 16:34#
                          Это из раздела фантастики…
                      2. Дед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. Simkin Andrew02 июня 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. Дед02 июня 2018, 22:00#
                            Не совсем понял с общим классом всем DIV-ам, а как же потом выбирать нужный? Если можно напишите все в моем примере, что бы все таки понял.
                            Стили в атрибуте style написал только для примера, они прописаны в файле .css
                            Будьте здоровы.
                            1. Simkin Andrew03 июня 2018, 09:23#
                              Я в примере написал onClick для первой кнопки. Нужный выбирается затем так же по ID. Остальные аналогично. Если не понятно, то лучше сначала почитай какой-нибудь самоучитель по Jquery, сильно поможет в разработке.
                          2. varnak20 июня 2018, 17:21(был изменён)#
                            не туда
                          3. varnak20 июня 2018, 17:22#
                            статья помогла спс.
                            дайте код приведения (или сслыку)
                            1. Simkin Andrew22 июня 2018, 11:27#
                              я не верю в привидения
                              1. Vladimir04 августа 2018, 00:50#
                                еба я пересрался.
                                1. Михаэль Вейк25 февраля 2019, 16:31#
                                  Привидений не существует. Это лишь иллюзия…
                            2. 913 ноября 2018, 14:57#
                              dbbdbx
                              1. Михаэль Вейк25 февраля 2019, 16:30#
                                Отличная статья! Спасибо!
                                © REALADMIN.RU   2019 г.
                                Страница сгенерирована: 0,1567 s | 6 mb.
                                На каком уровне Вы играете в шахматы?
                                О П Р О С
                                Home Question Top