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
Комментарии — 7
  1. avatar Александра 18 ноября 2015, 18:36 #
    Просто супер статья, спасибо!
    1. avatar Simkin Andrew 20 ноября 2015, 22:08 #
      спасибо за положительный отзыв
      1. avatar Сергей 20 августа 2016, 18:43 #
        Статья и правда супер!!!
      2. avatar Александр 08 декабря 2015, 12:54 #
        Статья замечательная! На свой вопрос, ответ получил.
        1. avatar tasman992 15 декабря 2015, 23:42 #
          Можем ли мы передать функции значение не только this?
          1. 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, подключается ко всем страницам и там пишутся все скрипты. Пихать их в код самого сайта — плохой тон. А чтобы всё быстро находить — пишите подробные комментарии к каждому скрипту.
            © REALADMIN.RU   2016 г.
            Страница сгенерирована: 0,1261 s | 10 mb.
            На каком уровне Вы играете в шахматы?
            О П Р О С
            Home Question Top