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
Комментарии — 11
  1. 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,1285 s | 10 mb.
              На каком уровне Вы играете в шахматы?
              О П Р О С
              Home Question Top