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

Ещё один вариант написания скрипта для onclick

XHTML

<input type=»button» id=»button» value=»Нажмите на кнопку» />
<script>
button.onclick = function() {
alert( ‘Вот так это работает!’ );
};
</script>

Заключается он в том, что мы не пишем этот атрибут для кнопки, а присваиваем ей идентификатор id=»button», а потом пишем скрипт, в котором указываем что при событии onclick по кнопке с идентификатором button срабатывает вот такой код:

PHP

alert( ‘Вот так это работает!’ );

Вот как это выглядит в действии:

Удачи вам!

С уважением Юлия Гусарь

Event Refresher

Onclick is a type of JavaScript event. Events are actions that take place in the browser that can either be started by the user or the browser itself. A user clicking a button, submitting a form, or pressing a key on their keyboard are all examples of events in action. In this tutorial, we’ll focus on the first one: a user clicking an element.

By using events, developers can make a web page interactive. You could make a form visible when the user clicks a button, or display a message to a user when they submit a form.

There are two main components to events: event handlers, and event listeners.

When you click a button, press a key, or hover over an element, an event is run. The event handler is the code that runs when your event starts. For example, when you click a button, the event handler will run. 

Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

The event listener is part of an element—like a button—that “listens” and waits until you interact with it. Then, the listener executes the event handler.

Использование функций javascript в атрибуте HTML onclick

Когда к щелчку нужно привязать выполнение нескольких действий javascript лучше использовать функции, а потом вызывать их в атрибуте onclick.
Например, напишем скрипт, который позволит по щелчку на кнопку скрыть один блок и показать другой.

XHTML

<p>
<input class=»button» type=»button» onclick=»showText()» value=»Нажми на меня!»/>
</p>
<div class=»hide-block1″>
Это блок, который нужно скрыть.
</div>
<div class=»show-block1″ style=”display:none;”>
Это блок, который нужно показать.
</div>
<script>
function showText() {
$(«.hide-block1»).fadeOut();
$(«.show-block1»).fadeIn();
}
</script>

Обратите внимание, что в самом атрибуте мы пишем только название функции. В данном случае showText(), а код самой функции мы пишем ниже и оборачиваем его в тег script

event.defaultPrevented

Свойство установлено в , если действие по умолчанию было предотвращено, и , если нет.

Рассмотрим практическое применение этого свойства для улучшения архитектуры.

Помните, в главе Всплытие и погружение мы говорили о и упоминали, что останавливать «всплытие» – плохо?

Иногда вместо этого мы можем использовать , чтобы просигналить другим обработчикам, что событие обработано.

Давайте посмотрим практический пример.

По умолчанию браузер при событии (клик правой кнопкой мыши) показывает контекстное меню со стандартными опциями. Мы можем отменить событие по умолчанию и показать своё меню, как здесь:

Теперь в дополнение к этому контекстному меню реализуем контекстное меню для всего документа.

При правом клике должно показываться ближайшее контекстное меню.

Проблема заключается в том, что когда мы кликаем по элементу , то мы получаем два меню: контекстное меню для кнопки и (событие всплывает вверх) контекстное меню для документа.

Как это поправить? Одно из решений – это подумать: «Когда мы обрабатываем правый клик в обработчике на кнопке, остановим всплытие», и вызвать :

Теперь контекстное меню для кнопки работает как задумано. Но цена слишком высока. Мы навсегда запретили доступ к информации о правых кликах для любого внешнего кода, включая счётчики, которые могли бы собирать статистику, и т.п. Это слегка неразумно.

Альтернативным решением было бы проверить в обработчике , было ли отменено действие по умолчанию? Если да, тогда событие было обработано, и нам не нужно на него реагировать.

Сейчас всё работает правильно. Если у нас есть вложенные элементы и каждый из них имеет контекстное меню, то код также будет работать. Просто убедитесь, что проверяете в каждом обработчике .

event.stopPropagation() и event.preventDefault()

Как мы можем видеть, и (также известный как ) – это две разные функции. Они никак не связаны друг с другом.

Архитектура вложенных контекстных меню

Есть также несколько альтернативных путей, чтобы реализовать вложенные контекстные меню. Одним из них является единый глобальный объект с обработчиком и методами, позволяющими хранить в нём другие обработчики.

Объект будет перехватывать любой клик правой кнопкой мыши, просматривать сохранённые обработчики и запускать соответствующий.

Но при этом каждый фрагмент кода, которому требуется контекстное меню, должен знать об этом объекте и использовать его вместо собственного обработчика .

Серия удачных событий

При возникновении события система генерирует сигнал, а также предоставляет механизм, с помощью которого можно автоматически предпринимать какие-либо действия (например, выполнить определённый код), когда происходит событие. Например, в аэропорту, когда взлётно-посадочная полоса свободна для взлёта самолёта, сигнал передаётся пилоту, и в результате они приступают к взлёту.

В Web события запускаются внутри окна браузера и, как правило, прикрепляются к конкретному элементу, который в нем находится. Это может быть один элемент, набор элементов, документ HTML, загруженный на текущей вкладке, или все окно браузера. Существует множество различных видов событий, которые могут произойти, например:

• Пользователь кликает мышью или наводит курсор на определённый элемент.
• Пользователь нажимает клавишу на клавиатуре.
• Пользователь изменяет размер или закрывает окно браузера.
• Завершение загрузки веб-страницы.
• Отправка данных через формы.
• Воспроизведение видео, пауза или завершение воспроизведения.
• Произошла ошибка.

Подробнее о событиях можно посмотреть в Справочнике по событиям.

Каждое доступное событие имеет обработчик событий — блок кода (обычно это функция JavaScript, вводимая вами в качестве разработчика), который будет запускаться при срабатывании события. Когда такой блок кода определён на запуск в ответ на возникновение события, мы говорим, что мы регистрируем обработчик событий

Обратите внимание, что обработчики событий иногда называют слушателями событий (от англ. event listeners). Они в значительной степени взаимозаменяемы для наших целей, хотя, строго говоря, они работают вместе

Слушатель отслеживает событие, а обработчик — это код, который запускается в ответ на событие.

Примечание: Важно отметить, что веб-события не являются частью основного языка JavaScript. Они определены как часть JavaScript-API, встроенных в браузер. Рассмотрим простой пример

Вы уже видели события и обработчики событий во многих примерах в этом курсе, но давайте повторим для закрепления информации. В этом примере у нас есть кнопка , при нажатии которой цвет фона изменяется случайным образом:

Рассмотрим простой пример. Вы уже видели события и обработчики событий во многих примерах в этом курсе, но давайте повторим для закрепления информации. В этом примере у нас есть кнопка , при нажатии которой цвет фона изменяется случайным образом:

JavaScript выглядит так:

В этом коде мы сохраняем ссылку на кнопку внутри переменной  типа , используя функцию . Мы также определяем функцию, которая возвращает случайное число. Третья часть кода — . Переменная указывает на элемент — для этого типа объекта существуют возникающие при определённом взаимодействии с ним события, а значит, возможно использование обработчиков событий. Мы отслеживаем момент возникновения события при щелчке мышью, связывая свойство обработчика события с анонимной функцией, генерирующей случайный цвет RGB и устанавливающей его в качестве цвета фона элемента .

Этот код теперь будет запускаться всякий раз, когда возникает событие при нажатии на элемент  — всякий раз, когда пользователь щёлкает по нему.

Пример вывода выглядит следующим образом:

События, как понятие, относятся не только к JavaScript — большинство языков программирования имеют модель событий, способ работы которой часто отличается от модели в JavaScript. Фактически, даже модель событий в JavaScript для веб-страниц отличается от модели событий для просто JavaScript, поскольку используются они в разных средах.

Например, Node.js — очень популярная среда исполнения JavaScript, которая позволяет разработчикам использовать JavaScript для создания сетевых и серверных приложений. Модель событий Node.js основана на том, что существуют обработчики, отслеживающие события, и эмиттеры (передатчики), которые периодически генерируют события. В общем-то, это похоже на модель событий в JavaScript для веб-страниц, но код совсем другой. В этой модели используется функция  для регистрации обработчиков событий, и функция  для регистрации обработчика событий, который отключается после первого срабатывания. Хорошим примером использования являются протоколы событий .

Вы также можете использовать JavaScript для создания кросс-браузерных расширений — улучшения функциональности браузера с помощью технологии WebExtensions. В отличии от модели веб-событий здесь свойства обработчиков событий пишутся в так называемом регистре CamelCase (например, , а не ) и должны сочетаться с функцией . См. для примера.

На данном этапе обучения вам не нужно особо разбираться в различных средах программирования, однако важно понимать, что принцип работы событий в них отличается

События мыши

К событиям мыши относятся:

• click — клик;
• dblclick — двойной клик;
• mouseover — наведение курсора мыши на элемент;
• mousemove — перемещение курсора мыши над элементом;
• mouseout — уведение курсора мыши с элемента;
• mousedown — нажатие левой кнопки мыши;
• mouseup — отпускание левой кнопки мыши;
• contextmenu — нажатие правой кнопки мыши и вывод контекстного меню.

Для того чтобы написать ответную реакцию на событие, создают обработчик события (event handler), который, как правило, представляет собой функцию.

Назначить обработчик события можно несколькими способами:

1. ;
2. ;
3. ;
4. .

Рассмотрим все способы.

More Examples

Example

Click on a <button> element to display the current day, date and time:

<button onclick=»getElementById(‘demo’).innerHTML = Date()»>What is the time?</button>

Example

Click on a <p> element to change its text color to red:

<p id=»demo» onclick=»myFunction()»>Click me to change my text color.</p><script>function myFunction() {  document.getElementById(«demo»).style.color = «red»;}</script>

Example

Another example on how to change the color of a <p> element by clicking on it:

<p onclick=»myFunction(this, ‘red’)»>Click me to change my text color.</p><script>function myFunction(elmnt,clr) {
  elmnt.style.color = clr;}</script>

Example

Click on a button to copy some text from an input field to another input
field:

<button onclick=»myFunction()»>Copy Text</button><script>
function myFunction() {  document.getElementById(«field2»).value = document.getElementById(«field1»).value;}</script>

Example

Assign the «onclick» event to the window object:

window.onclick = myFunction;// If the user clicks in the window, set the background color of <body> to yellowfunction myFunction() {  document.getElementsByTagName(«BODY»).style.backgroundColor = «yellow»;
}

Example

Using onclick to create a dropdown button:

// Get the button, and when the user clicks on it, execute myFunction
document.getElementById(«myBtn»).onclick = function() {myFunction()};/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */function myFunction() {  document.getElementById(«myDropdown»).classList.toggle(«show»);}

Обработка события onclick для меню

В следующем примере рассмотрим, как предыдущий код можно применить к сворачиванию/разворачиванию меню, которое размещено внутри элементов списка

Мы используем css-свойство , чтобы меню появлялось из прозрачного состояния (за это отвечает свойство ).  Обратите внимание, что теги расположены после тегов с разметкой html-элементов, иначе скрипт будет вызывать ошибку

Событие onclick для меню

<style>
@keyframes fadeInMenu {
from {opacity: 0}
to {opacity: 1}
}
</style>

<a href=»#» id=»toggleMenu»>Menu</a>
<ul id=»mymenu» class=»hideText»>
<li><a href=»#»>Home</a></li>
<li><a href=»#»>About Us</a></li>
<li><a href=»#»>Portfolio</a></li>
<li><a href=»#»>Contacts</a></li>
</ul>

<script>
toggleMenu.addEventListener(‘click’, showHideMenu);
function showHideMenu(event){
event.preventDefault();
mymenu.classList.toggle(‘hideText’);
mymenu.classList.contains(‘hideText’) ? mymenu.style.animation=’none’ :
mymenu.style.animation=’fadeInMenu .8s’;
}
</script>

В функцию   передается параметр , который мы вроде бы нигде не записывали. Этот параметр — ссылка на событие со всеми его свойствами и методами. Нужен параметр для того, чтобы при клике на ссылке страница не «прыгала» вверх, т.к. именно к этому приводит такая запись атрибута . Для этого мы отменяем действие по умолчанию при клике на такой ссылке с помощью метода .

Вы можете проверить действие метода , кликнув на ссылке с текстом «Menu»  и на любой другой ссылке открывшегося меню, чтобы посмотреть на разницу.

Действие браузера по умолчанию

Браузер имеет своё собственное поведение по умолчанию для различных событий.

В ряде случаев реакцию браузера на событие можно убрать в обработчике.Для этого у IE и W3C есть, как и раньше, два по сути близких, но по виду разных способа:

element.onclick = function(event) {
    event = event || window.event 

    if (event.preventDefault) {
        // Вариант стандарта W3C: 
        event.preventDefault()
    } else {
        // Вариант Internet Explorer:
        event.returnValue = false
    }
}

Вместо можно записать одну строчку:

..
event.preventDefault ? event.preventDefault() : (event.returnValue=false)
...

Некоторые поведения по умолчанию происходят до вызова обработчика события. В этом случае их, конечно же, отменить нельзя.

Например, при фокусировке на ссылке — браузер выделяет ее пунктирной рамочкой.
Это действие выполняется до события , поэтому отменить выделение в обработчике нельзя.

При клике перехода не произойдет, а рамка вокруг ссылки появится.

Код примера:

var a = document.getElementById('my-focus-a')
a.onfocus = a.onclick = function(e) {
    e = e || window.event
    // другая кроссбраузерная запись остановки события
    e.preventDefault ? e.preventDefault() : (e.returnValue=false)
}

Достоинства и недостатки такого способа

Давайте теперь обсудим достоинства и недостатки
этого способа.

Достоинства

Достоинства такие: теперь,
если мы захотим задать одновременно одно событие всем
инпутам на странице, нет нужды вручную прописывать каждому
из них атрибут с событием. Можно просто получить все инпуты,
перебрать их циклом и каждому привязать событие.

Давайте сделаем это. Получим все инпуты с помощью getElementsByTagName
и в цикле привяжем каждому такое событие: пусть по клику каждый инпут
выдает алертом текст ‘!’:

Теперь нажатие на любой инпут будет приводить к тому,
что будет срабатывать функция func, которая алертом выводит ‘!’.

Использование this

Давайте усложним задачу и сделаем так,
чтобы alert выводил содержимое атрибута value того инпута,
на который кликнули мышкой.

Для этого нужно воспользоваться this, только не так, как мы это делали раньше.
Раньше, когда мы писали событие прямо в атрибут, мы делали так: onclick=»func(this)»,
однако сейчас вот так — elems.onclick = func(this) — мы сделать не можем.

Во-первых, потому, что функцию func здесь нужно писать без круглых скобок,
иначе будет не исходный код, а результат работы функции.

Во-вторых, this указывает на разные элементы в зависимости от контекста
(в зависимости от места, где он написан). И в нашем случае он не будет ссылаться
на нужный нам элемент (то есть на тот, на который мы кликнули).
Про контекст выполнения поговорим чуть позже, пока просто знайте, что он есть.

Вы можете спросить, почему тут — onclick=»func()» — в функции написаны круглые скобки, хотя по логике
там тоже требуется исходный код, а не результат.
Об этом вы узнаете в уроке про анонимные функции чуть позже.

Так как правильно использовать this в нашей конструкции elems.onclick = func?
На самом деле тут this доступен внутри функции func и он ссылается на тот элемент,
в котором возникло событие, вызвавшее эту функцию. То есть, если я делаю клик по первому
инпуту — в this будет лежать ссылка на него, а если по второму — то на него.

В данном случае считайте, что this — это будто переменная elem,
полученная через getElementById. К примеру, elem.value позволяет обратиться
к атрибуту value, значит this.value будет делать то же самое.

Итак, давайте все-таки решим нашу задачу — сделаем так,
чтобы alert выводил содержимое атрибута value того инпута,
на который кликнули мышкой:

Учтите, что если вы попытаетесь воспользоваться this
внутри функции, которая была прописана прямо в атрибуте (то есть первым способом задать событие) — у
вас ничего не выйдет. Смотрите пример неправильного кода:

В данном случае контекст выполнения таков, что this ссылается на
window, а не на текущий элемент. Почему так — поговорим, когда вы разберете анонимные функции.

Напоминаю правильный вариант:

Недостатки

Теперь поговорим о недостатках.
Недостатком такого способа будет то,
что мы можем привязать к событию только одну функцию.
Если попытаться сначала записать одну функцию, а потом другую —
у нас ничего не получится.

В следующем примере мы пытаемся привязать к событию onclick
сразу две функции func1 и func2. Однако по клику на элемент сработает
только вторая функция, так как она затрет первую:

В принципе, эту проблему легко обойти, если ввести еще и третью функцию func3.
Привяжем к атрибуту onclick только func3, а она пусть вызывает func1 и func2 у себя внутри:

Как вы видите, этот недостаток не слишком существенный и его легко обойти.
Только что вводится лишняя функция, что немного неудобно.

Однако, есть еще один недостаток — мы не можем легко отвязать от onclick, к примеру, только
функцию func1, оставив func2 привязанным. Можно, конечно же, накрутить большие конструкции
кода, однако это не нужно, если пользоваться еще более продвинутым способом
привязать событие — через addEventListener. Давайте посмотрим, как с работать
с этой функцией:

Использование метода addEventListener()

Самый используемый в последнее время, т.к. позволяет назначить несколько обработчиков одного и того же события. В его синтаксисе не нужно использовать приставку «on», только название самого события:

JavaScript

элемент.addEventListener( «событие», имя_функции, фаза);
Например,
close.addEventListener( «click», removeBlock, false);

Под параметром «фаза» подразумевается фаза прохождения события — всплытие или перехват (почитать подробнее). Поскольку, большинство событий обрабатывают на фазе всплытия, последний параметр будет равен . А поскольку именно таково его значение по умолчанию, то его просто не указывают:

JavaScript

close.addEventListener( «click», removeBlock);

Особенности применения onclick для ссылки HTML

HTML код написания этого атрибута в теге ссылки выглядит так:

PHP

<a title=»Ссылка» href=»#» onclick=» alert(‘Ку-ку!’)»»>Нажми на меня!</a>

Это позволяет нам добиться того чтобы браузер проигнорировал то что написано внутри атрибута href и никуда не переходил.

Вы наверное спросите: «А зачем тогда вообще оставлять атрибут href? Удалили его и все дела!»

В принципе такой вариант тоже возможен и он будет работать, НО с точки зрения валидности HTML кода это не есть хорошо, так как этот атрибут является основным и неотъемлемым для ссылки и удаляя его вы коварно лишаете ссылку важнейшей части её «тела». Валидаторы вам этого не простят!

Внутри атрибута href можно задать следующие значения:

• оставить его пустым href=»»
• поставить в нём решётку href=»#»
• написать href=»javascript://»
• указать реальную ссылку своего сайта href=» //impuls-web.ru/»

Мне больше нравится вариант с javascript:// и #.

Так же артибут onclick можно применять и к любым другим HTML тегам, но это будет скорее из области изощрений и извращений, так как в HTML для событий клика предназначены кнопки и ссылки, поэтому тулить события щелчка к другим тегам как то не очень целесообразно.

Решение в лоб

<li>
	<a href="#" onclick="aclick('div25');return false;">Заголовок пункта<a>
	<div id="div25">Текст пункта<div>
<li>

Каждому блоку вешаем уникальный ID. В ссылке прописываем обработчик, который вызывает функцию (в нашем случае aclick), передавая ей ID связанного с этой ссылкой блока. Обработчик же занимается раскрыванием/скрыванием полученного в аргументе блока.

Минусы данного решения

Первый минус — много мусора в HTML.

Второй минус более существенен. Здесь мы используем процедурное программирование со всеми его недостатками.

В чём главный недостаток процедурного программирования? В том, что данные не связаны с обрабатывающим их кодом. Вот и у нас здесь куча ссылок, куча блоков и одна функция которая их всех разруливает.

Каждому немного знающему JS очевидно, что блок нельзя раскрыть простым циклом с задержками, типа следующего:

function aclick(divid) {
	var div = document.getElementById(divid);
	div.style.height = "0";
	for (var i = 10; i < 500; i += 10) {
		usleep(100);
		div.style.height = i + "px";
	}
}

При таком цикле браузер просто полностью повиснет на несколько секунд. Причём в большинстве браузеров блок отрисуется только целиком в конце.

Поэтому, хотя нам этого явно не хотелось, придётся использовать таймеры и потихоньку открывать блок.

И вот у нас получается несколько параллельно идущих процессов со связанными с ними данными (таймер, состояние и т.п). И все их разруливает одна единственная функция. Несчастная функция.

Наиболее частое решение — использовать массивы значений.

var divs = {};
var timers = {};
function aclick(divid) {
	divsdivid = document.getElementById(divid);
	...
	timersdivid = setInterval(...);
	...
}

Массивы хранятся в глобальных переменных. Их нужно вовремя инициализовывать, сбрасывать и т.д. и т.п.

Вобщем, вместо удовольствия от любимой работы, получаем в крайнем случае удовольствие анальное.

Ещё вариант хранить данные привязанные к блоку в свойствах DOM-объекта этого блока. Уже лучше, но заморочек по прежнему хватает.

Итого

Чтобы сгенерировать событие из кода, вначале надо создать объект события.

Базовый конструктор принимает обязательное имя события и – объект с двумя свойствами:

• чтобы событие всплывало.
• если мы хотим, чтобы работал.

Особые конструкторы встроенных событий , и другие принимают специфичные для каждого конкретного типа событий свойства. Например, для событий мыши.

Для пользовательских событий стоит применять конструктор . У него есть дополнительная опция , с помощью которой можно передавать информацию в объекте события. После чего все обработчики смогут получить к ней доступ через .

Несмотря на техническую возможность генерировать встроенные браузерные события типа или , пользоваться ей стоит с большой осторожностью. Весьма часто, когда разработчик хочет сгенерировать встроенное событие – это вызвано «кривой» архитектурой кода

Весьма часто, когда разработчик хочет сгенерировать встроенное событие – это вызвано «кривой» архитектурой кода.

Как правило, генерация встроенных событий полезна в следующих случаях:

• Либо как явный и грубый хак, чтобы заставить работать сторонние библиотеки, в которых не предусмотрены другие средства взаимодействия.
• Либо для автоматического тестирования, чтобы скриптом «нажать на кнопку» и посмотреть, произошло ли нужное действие.

Пользовательские события со своими именами часто создают для улучшения архитектуры, чтобы сообщить о том, что происходит внутри наших меню, слайдеров, каруселей и т.д.

Заключение

Обработчики событий позволяют обнаруживать и реагировать на события, над которыми мы не имеем прямого контроля. Для регистрации такого обработчика используется метод addEventListener.

Каждое событие относится к определенному типу («keydown«, «focus» и так далее), который идентифицирует его. Большинство событий вызывается для конкретного элемента DOM, а затем распространяются на родительские узлы элемента. Это позволяет обработчикам, связанным с этими элементами, обрабатывать их.

Когда вызывается обработчик, ему передается объект события с дополнительной информацией о действии. Этот объект также содержит методы, позволяющие остановить дальнейшее распространение события (stopPropagation) или предотвратить обработку события браузером по умолчанию (preventDefault).

Нажатие клавиш порождает события «keydown«, «keypress» и «keyup«. Нажатие мыши порождает события «mousedown«, «mouseup» и «click«. Перемещение мыши — «mousemove«, «mouseenter» и «mouseout«.

JavaScript scroll event можно определить с помощью события «scroll«, а смена фокуса — «focus» и «blur«. После завершения загрузки документа для окна возникает событие «load«.

Только одна часть JavaScript программы может работать одновременно. Обработчики событий и другие запланированные скрипты должны дожидаться, когда закончится выполнение других скриптов в очереди.

Пожалуйста, оставьте ваши отзывы по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, лайки, дизлайки, подписки, отклики!