Сколько есть возможных значений event button

Основы событий мыши

В этой главе мы более детально рассмотрим события мыши и их свойства.

Сразу заметим: эти события бывают не только из-за мыши, но и эмулируются на других устройствах, в частности, на мобильных, для совместимости.

Типы событий мыши

Мы уже видели некоторые из этих событий:

mousedown/mouseup Кнопка мыши нажата/отпущена над элементом. mouseover/mouseout Курсор мыши появляется над элементом и уходит с него. mousemove Каждое движение мыши над элементом генерирует это событие. click Вызывается при mousedown , а затем mouseup над одним и тем же элементом, если использовалась левая кнопка мыши. dblclick Вызывается двойным кликом на элементе. contextmenu Вызывается при попытке открытия контекстного меню, как правило, нажатием правой кнопки мыши. Но, заметим, это не совсем событие мыши, оно может вызываться и специальной клавишей клавиатуры.

…Есть также несколько иных типов событий, которые мы рассмотрим позже.

Порядок событий

Как вы можете видеть из приведённого выше списка, действие пользователя может вызвать несколько событий.

Например, клик мышью вначале вызывает mousedown , когда кнопка нажата, затем mouseup и click , когда она отпущена.

В случае, когда одно действие инициирует несколько событий, порядок их выполнения фиксирован. То есть обработчики событий вызываются в следующем порядке: mousedown → mouseup → click .

Кликните на кнопку ниже, и вы увидите события. Также попробуйте двойной клик.

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

Кроме того, мы можем видеть свойство button , которое позволяет нам определять кнопку мыши; это объясняется ниже.

Кнопки мыши

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

Обычно мы не используем его для событий click и contextmenu , потому что первое происходит только при щелчке левой кнопкой мыши, а второе – только при щелчке правой кнопкой мыши.

С другой стороны, обработчикам mousedown и mouseup может потребоваться event.button , потому что эти события срабатывают на любую кнопку, таким образом button позволяет различать «нажатие правой кнопки» и «нажатие левой кнопки».

Возможными значениями event.button являются:

Большинство мышек имеют только левую и правую кнопку, поэтому возможные значения это 0 или 2. Сенсорные устройства также генерируют аналогичные события, когда кто-то нажимает на них.

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

Устаревшее свойство event.which

В старом коде вы можете встретить event.which свойство – это старый нестандартный способ получения кнопки с возможными значениями:

• event.which == 1 – левая кнопка,
• event.which == 2 – средняя кнопка,
• event.which == 3 – правая кнопка.

На данный момент event.which устарел, нам не следует его использовать.

Средняя кнопка сейчас – скорее экзотика, и используется очень редко.

Модификаторы: shift, alt, ctrl и meta

Все события мыши включают в себя информацию о нажатых клавишах-модификаторах.

• shiftKey : Shift
• altKey : Alt (или Opt для Mac)
• ctrlKey : Ctrl
• metaKey : Cmd для Mac

Они равны true , если во время события была нажата соответствующая клавиша.

Например, кнопка внизу работает только при комбинации Alt + Shift +клик:

Внимание: обычно на Mac используется клавиша Cmd вместо Ctrl

В Windows и Linux клавишами-модификаторами являются Alt , Shift и Ctrl . На Mac есть ещё одна: Cmd , которой соответствует свойство metaKey .

В большинстве приложений, когда в Windows/Linux используется Ctrl , на Mac используется Cmd .

То есть, когда пользователь Windows нажимает Ctrl + Enter и Ctrl + A , пользователь Mac нажимает Cmd + Enter или Cmd + A , и так далее.

Поэтому, если мы хотим поддерживать такие комбинации, как Ctrl +клик, то для Mac имеет смысл использовать Cmd +клик. Это удобней для пользователей Mac.

Даже если мы и хотели бы заставить людей на Mac использовать именно Ctrl +клик, это довольно сложно. Проблема в том, что левый клик в сочетании с Ctrl интерпретируется как правый клик на MacOS и генерирует событие contextmenu , а не click как на Windows/Linux.

Поэтому, если мы хотим, чтобы пользователям всех операционных систем было удобно, то вместе с ctrlKey нам нужно проверять metaKey .

Для JS-кода это означает, что мы должны проверить if (event.ctrlKey || event.metaKey) .

Не забывайте про мобильные устройства

Комбинации клавиш хороши в качестве дополнения к рабочему процессу. Так что, если посетитель использует клавиатуру – они работают.

Но если на их устройстве его нет – тогда должен быть способ жить без клавиш-модификаторов.

Координаты: clientX/Y, pageX/Y

Все события мыши имеют координаты двух видов:

1. Относительно окна: clientX и clientY .
2. Относительно документа: pageX и pageY .

Мы уже рассмотрели разницу между ними в главе Координаты.

Если в кратце, то относительные координаты документа pageX/Y отсчитываются от левого верхнего угла документа и не меняются при прокрутке страницы, в то время как clientX/Y отсчитываются от левого верхнего угла текущего окна. Когда страница прокручивается, они меняются.

Например, если у нас есть окно размером 500×500, и курсор мыши находится в левом верхнем углу, то значения clientX и clientY равны 0 , независимо от того, как прокручивается страница.

А если мышь находится в центре окна, то значения clientX и clientY равны 250 независимо от того, в каком месте документа она находится и до какого места документ прокручен. В этом они похожи на position:fixed .

Наведите курсор мыши на поле ввода, чтобы увидеть clientX/clientY (пример находится в iframe , поэтому координаты определяются относительно этого iframe ):

Координаты относительно документа pageX , pageY отсчитываются не от окна, а от левого верхнего угла документа. Подробнее о координатах вы можете узнать в главе Координаты.

Отключаем выделение

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

Например, двойной клик на текст ниже выделяет его в дополнение к нашему обработчику:

Сделайте двойной клик на мне

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

Есть несколько способов запретить выделение, о которых вы можете прочитать в главе Selection и Range.

В данном случае самым разумным будет отменить действие браузера по умолчанию при событии mousedown , это отменит оба этих выделения:

До. Сделайте двойной клик на мне . После

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

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

Предотвращение копирования

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

 
Уважаемый пользователь, Копирование информации запрещено для вас. Если вы знаете JS или HTML, вы можете найти всю нужную вам информацию в исходном коде страницы.
 

Если вы попытаетесь скопировать текст в , у вас это не получится, потому что срабатывание события oncopy по умолчанию запрещено.

Конечно, пользователь имеет доступ к HTML-коду страницы и может взять текст оттуда, но не все знают, как это сделать.

Итого

События мыши имеют следующие свойства:

• Кнопка: button .
• Клавиши-модификаторы ( true если нажаты): altKey , ctrlKey , shiftKey и metaKey (Mac).
  • Если вы планируете обработать Ctrl , то не забудьте, что пользователи Mac обычно используют Cmd , поэтому лучше проверить if (e.metaKey || e.ctrlKey) .

  Действие по умолчанию события mousedown – начало выделения, если в интерфейсе оно скорее мешает, его можно отменить.

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

  Задачи

  Выделяемый список

  важность: 5

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

  • При клике на элемент списка выделяется только этот элемент (добавляется класс .selected ), отменяется выделение остальных элементов.
  • Если клик сделан вместе с Ctrl ( Cmd для Mac), то выделение переключается на элементе, но остальные элементы при этом не изменяются.

  P.S. В этом задании все элементы списка содержат только текст. Без вложенных тегов.

  P.P.S. Предотвратите стандартное для браузера выделение текста при кликах.

  Мышь: клики, кнопка, координаты

  Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

  Более новая информация по этой теме находится на странице https://learn.javascript.ru/mouse-events-basics.

  В этой главе мы глубже разберёмся со списком событий мыши, рассмотрим их общие свойства, а также те события, которые связаны с кликом.

  Типы событий мыши

  Условно можно разделить события на два типа: «простые» и «комплексные».

  Простые события

  mousedown Кнопка мыши нажата над элементом. mouseup Кнопка мыши отпущена над элементом. mouseover Мышь появилась над элементом. mouseout Мышь ушла с элемента. mousemove Каждое движение мыши над элементом генерирует это событие.

  Комплексные события

  click Вызывается при клике мышью, то есть при mousedown , а затем mouseup на одном элементе contextmenu Вызывается при клике правой кнопкой мыши на элементе. dblclick Вызывается при двойном клике по элементу.

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

  Порядок срабатывания событий

  Одно действие может вызывать несколько событий.

  Например, клик вызывает сначала mousedown при нажатии, а затем mouseup и click при отпускании кнопки.

  В тех случаях, когда одно действие генерирует несколько событий, их порядок фиксирован. То есть, обработчики вызовутся в порядке mousedown → mouseup → click .

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

  На тест-стенде ниже все мышиные события записываются, и если между событиями проходит больше 1 секунды, то они для удобства чтения отделяются линией. Также присутствуют свойства which/button , по которым можно определить кнопку мыши. Мы их рассмотрим далее.

  Каждое событие обрабатывается независимо.

  Например, при клике события mouseup + click возникают одновременно, но обрабатываются последовательно. Сначала полностью завершается обработка mouseup , затем запускается click .

  Получение информации о кнопке: which

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

  Для получения кнопки мыши в объекте event есть свойство which .

  На практике оно используется редко, т.к. обычно обработчик вешается либо onclick – только на левую кнопку мыши, либо oncontextmenu – только на правую.

  Возможны следующие значения:

  • event.which == 1 – левая кнопка
  • event.which == 2 – средняя кнопка
  • event.which == 3 – правая кнопка

  Это свойство не поддерживается IE8-, но его можно получить способом, описанным в конце главы.

  Правый клик: oncontextmenu

  Это событие срабатывает при клике правой кнопкой мыши:

  Правый клик на этой кнопке выведет "Клик".
   Правый клик сюда

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

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

  В примере ниже встроенное меню показано не будет:

  Правый клик сюда

  Модификаторы shift, alt, ctrl и meta

  Во всех событиях мыши присутствует информация о нажатых клавишах-модификаторах.

  • shiftKey
  • altKey
  • ctrlKey
  • metaKey (для Mac)

  Например, кнопка ниже сработает только на Alt+Shift+Клик:

  Alt+Shift+Кликни меня! document.body.children[0].onclick = function(e) 

  Внимание: на Mac вместо Ctrl используется Cmd

  На компьютерах под управлением Windows и Linux есть специальные клавиши Alt , Shift и Ctrl . На Mac есть ещё одна специальная клавиша: Cmd , которой соответствует свойство metaKey .

  В большинстве случаев там, где под Windows/Linux используется Ctrl , на Mac используется Cmd . Там, где пользователь Windows нажимает Ctrl + Enter или Ctrl + A , пользователь Mac нажмёт Cmd + Enter или Cmd + A , и так далее, почти всегда Cmd вместо Ctrl .

  Поэтому, если мы хотим поддерживать сочетание Ctrl +click или другие подобные, то под Mac имеет смысл использовать Cmd +click. Пользователям Mac это будет гораздо комфортнее.

  Более того, даже если бы мы хотели бы заставить пользователей Mac использовать именно Ctrl +click – это было бы затруднительно. Дело в том, что обычный клик с зажатым Ctrl под Mac работает как правый клик и генерирует событие oncontextmenu , а вовсе не onclick , как под Windows/Linux.

  Решение – чтобы пользователи обоих операционных систем работали с комфортом, в паре с ctrlKey нужно обязательно использовать metaKey .

  В JS-коде это означает, что для удобства пользователей Mac нужно проверять if (event.ctrlKey || event.metaKey) .

  Координаты в окне: clientX/Y

  Все мышиные события предоставляют текущие координаты курсора в двух видах: относительно окна и относительно документа.

  Пара свойств clientX/clientY содержит координаты курсора относительно текущего окна.

  При этом, например, если ваше окно размером 500×500, а мышь находится в центре, тогда и clientX и clientY будут равны 250.

  Можно как угодно прокручивать страницу, но если не двигать при этом мышь, то координаты курсора clientX/clientY не изменятся, потому что они считаются относительно окна, а не документа.

  Проведите мышью над полем ввода, чтобы увидеть clientX/clientY :

  В той же системе координат работает и метод elem.getBoundingClientRect() , возвращающий координаты элемента, а также position:fixed .

  Относительно документа: pageX/Y

  Координаты курсора относительно документа находятся в свойствах pageX/pageY .

  Так как эти координаты – относительно левого-верхнего узла документа, а не окна, то они учитывают прокрутку. Если прокрутить страницу, а мышь не трогать, то координаты курсора pageX/pageY изменятся на величину прокрутки, они привязаны к конкретной точке в документе.

  В IE8- этих свойств нет, но можно получить их способом, описанным в конце главы.

  Проведите мышью над полем ввода, чтобы увидеть pageX/pageY (кроме IE8-):

  В той же системе координат работает position:absolute , если элемент позиционируется относительно документа.

  Устарели: x, y, layerX, layerY

  Некоторые браузеры поддерживают свойства event.x/y , event.layerX/layerY .

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

  Особенности IE8-

  Двойной клик

  Все браузеры, кроме IE8-, генерируют dblclick в дополнение к другим событиям.

  • mousedown (нажал)
  • mouseup+click (отжал)
  • mousedown (нажал)
  • mouseup+click+dblclick (отжал).

  IE8- на втором клике не генерирует mousedown и click .

  • mousedown (нажал)
  • mouseup+click (отжал)
  • (нажал второй раз, без события)
  • mouseup+dblclick (отжал).

  Поэтому отловить двойной клик в IE8-, отслеживая только click , нельзя, ведь при втором нажатии его нет. Нужно именно событие dblclick .

  Свойство which/button

  В старых IE8- не поддерживалось свойство which , а вместо него использовалось свойство button , которое является 3-х битным числом, в котором каждому биту соответствует кнопка мыши. Бит установлен в 1, только если соответствующая кнопка нажата.

  Чтобы его расшифровать – нужна побитовая операция & («битовое И»):

  • !!(button & 1) == true (1-й бит установлен), если нажата левая кнопка,
  • !!(button & 2) == true (2-й бит установлен), если нажата правая кнопка,
  • !!(button & 4) == true (3-й бит установлен), если нажата средняя кнопка.

  Что интересно, при этом мы можем узнать, были ли две кнопки нажаты одновременно, в то время как стандартный which такой возможности не даёт. Так что, в некотором смысле, свойство button – более мощное.

  Можно легко сделать функцию, которая будет ставить свойство which из button , если его нет:

  function fixWhich(e) < if (!e.which && e.button) < // если which нет, но есть button. (IE8-) if (e.button & 1) e.which = 1; // левая кнопка else if (e.button & 4) e.which = 2; // средняя кнопка else if (e.button & 2) e.which = 3; // правая кнопка >>

  Свойства pageX/pageY

  В IE до версии 9 не поддерживаются свойства pageX/pageY , но их можно получить, прибавив к clientX/clientY величину прокрутки страницы.

  Более подробно о её вычислении вы можете прочитать в разделе прокрутка страницы.

  Мы же здесь приведём готовый вариант, который позволяет нам получить pageX/pageY для старых и совсем старых IE:

  function fixPageXY(e) < if (e.pageX == null && e.clientX != null) < // если нет pageX.. var html = document.documentElement; var body = document.body; e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0); e.pageX -= html.clientLeft || 0; e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0); e.pageY -= html.clientTop || 0; >>

  Итого

  События мыши имеют следующие свойства:

  • Кнопка мыши: which (для IE8-: нужно ставить из button )
  • Элемент, вызвавший событие: target
  • Координаты, относительно окна: clientX/clientY
  • Координаты, относительно документа: pageX/pageY (для IE8-: нужно ставить по clientX/Y и прокрутке)
  • Если зажата спец. клавиша, то стоит соответствующее свойство: altKey , ctrlKey , shiftKey или metaKey (Mac).
  • Для поддержки Ctrl + click не забываем проверить if (e.metaKey || e.ctrlKey) , чтобы пользователи Mac тоже были довольны.

  Задачи

  Дерево: проверка клика на заголовке

  важность: 3

  Есть кликабельное JavaScript-дерево UL/LI (см. задачу Раскрывающееся дерево).

  При клике на заголовке его список его детей скрывается-раскрывается. Выглядит это так: (кликайте на заголовки)

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

  Как скрывать/раскрывать детей только при клике на заголовок?

  В задаче Раскрывающееся дерево это решено так: заголовки завёрнуты в элементы SPAN и проверяются клики только на них. Представим на минуту, что мы не хотим оборачивать текст в SPAN , а хотим оставить как есть. Например, по соображениям производительности, если дерево и так очень большое, ведь оборачивание всех заголовков в SPAN увеличит количество DOM-узлов в 2 раза.

  Решите задачу без обёртывания заголовков в SPAN , используя работу с координатами.

  Исходный документ содержит кликабельное дерево.

  P.S. Задача – скорее на сообразительность, однако подход может быть полезен в реальной жизни.

  Подсказка

  У события клика есть координаты. Проверьте по ним, попал ли клик на заголовок.

  Самый глубокий узел на координатах можно получить вызовом document.elementFromPoint(clientX, clientY).

  …Но заголовок является текстовым узлом, поэтому эта функция для него работать не будет. Однако это, всё же, можно обойти. Как?

  Подсказка 2

  Подсказка 2

  Можно при клике на LI сделать временный SPAN и переместить в него текстовый узел-заголовок.

  После этого проверить, попал ли клик в него и вернуть всё как было.

  // 1) заворачиваем текстовый узел в SPAN // 2) проверяем var elem = document.elementFromPoint(e.clientX, e.clientY); var isClickOnTitle = (elem == span); // 3) возвращаем текстовый узел обратно из SPAN

  На шаге 3 текстовый узел вынимается обратно из SPAN , всё возвращается в исходное состояние.

  События мыши

  Какая именно кнопка была нажата, записывается в другое свойство события – button . Для левой кнопки это число 1, для средней – 2, для правой – 3, для прокручивания вперед – 4, для прокручивания назад – 5. У событий MOUSEMOTION вместо button используется свойство buttons , в которое записывается состояние трех кнопок мыши (кортеж из трех элементов).

  Другим атрибутом мышиных типов событий является свойство pos , в которое записываются координаты происшествия (кортеж из двух чисел).

  Таким образом, если вы нажали правую кнопку мыши точно в середине окна размером 200×200, то будет создан объект типа Event с полями event.type = pygame.MOUSEBUTTONDOWN , event.button = 3 , event.pos = (100, 100) .

  У событий MOUSEMOTION есть еще один атрибут – rel . Он показывает относительное смещение по обоим осям. С помощью него, например, можно отслеживать скорость движения мыши.

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

  

  import pygame as pg import sys WHITE = (255, 255, 255) RED = (225, 0, 50) GREEN = (0, 225, 0) BLUE = (0, 0, 225) sc = pg.display.set_mode((400, 300)) sc.fill(WHITE) pg.display.update() while 1: for i in pg.event.get(): if i.type == pg.QUIT: sys.exit() if i.type == pg.MOUSEBUTTONDOWN: if i.button == 1: pg.draw.circle(sc, RED, i.pos, 20) pg.display.update() elif i.button == 3: pg.draw.circle(sc, BLUE, i.pos, 20) pg.draw.rect(sc, GREEN, (i.pos[0] - 10, i.pos[1] - 10, 20, 20)) pg.display.update() elif i.button == 2: sc.fill(WHITE) pg.display.update() pg.time.delay(20)

  В функции модуля draw вместо координат передается значение поля pos события. В pos хранятся координаты клика. В случае с функцией rect() извлекаются отдельные элементы кортежа pos . Вычитание числа 10 используется для того, чтобы середина квадрата, сторона которого равна 20-ти пикселям, точно соответствовала месту клика. Иначе в месте клика будет находиться верхний левый угол квадрата.

  Функцию update() не обязательно вызывать три раза в ветках if-elif-elif. Ее можно вызвать в основном теле главного цикла. Однако в этом случае, когда кликов не происходит, она будет выполнять зря.

  Также как в случае с клавиатурой в pygame есть свой модуль для событий мыши. Если нужно отслеживать длительное зажатие ее кнопок, следует воспользоваться функцией get_pressed() модуля pygame.mouse . Здесь же есть функция для считывания позиции курсора – get_pos() . Следующий код рисует синий круг в местах клика левой кнопкой мыши:

  import pygame as pg import sys WHITE = (255, 255, 255) BLUE = (0, 0, 225) sc = pg.display.set_mode((400, 300)) sc.fill(WHITE) pg.display.update() while 1: for i in pg.event.get(): if i.type == pg.QUIT: sys.exit() pressed = pg.mouse.get_pressed() pos = pg.mouse.get_pos() if pressed[0]: pg.draw.circle(sc, BLUE, pos, 5) pg.display.update() pg.time.delay(20) 

  Функция mouse.get_pressed() возвращает трехэлементный кортеж. Первый элемент (с индексом 0) соответствует левой кнопке мыши, второй – средней, третий – правой. Если значение элемента равно True , значит, кнопка нажата. Если False , значит – нет. Так выражение pressed[0] есть истина, если под нулевым индексом содержится True .

  Чтобы скрыть курсор (например, в игре, где управление осуществляется исключительно клавиатурой), надо воспользоваться функцией pygame.mouse.set_visible() , передав в качестве аргумента False .

  Так можно привязать графический объект к курсору (в данном случае привязывается квадрат):

  import pygame as pg import sys WHITE = (255, 255, 255) BLUE = (0, 0, 225) pg.init() sc = pg.display.set_mode((400, 300)) sc.fill(WHITE) pg.display.update() pg.mouse.set_visible(False) while 1: for i in pg.event.get(): if i.type == pg.QUIT: sys.exit() sc.fill(WHITE) if pg.mouse.get_focused(): pos = pg.mouse.get_pos() pg.draw.rect( sc, BLUE, (pos[0] - 10, pos[1] - 10, 20, 20)) pg.display.update() pg.time.delay(20) 

  Функцией get_pos() мы можем считывать позицию курсора, даже если он не виден. Далее в этой позиции рисуем фигуру на каждой итерации цикла.

  Функция get_focused() проверяет, находится ли курсор в фокусе окна игры. Если не делать эту проверку, то при выходе курсора за пределы окна, квадрат будет постоянно прорисовываться у края окна, где произошел выход, т. е. не будет исчезать.

  Практическая работа

  Напишите код в котором имитируется полет снаряда (пусть его роль сыграет круг) в место клика мышью. Снаряд должен вылетать из нижнего края окна и лететь вверх, т. е. изменяться должна только координата y . Пока летит один, другой не должен появляться. Когда снаряд достигает цели, должен имитировать взрыв, например, в этом месте прорисовываться квадрат.

  Курс с примерами решений практических работ:
  pdf-версия

  X Скрыть Наверх

  Pygame. Введение в разработку игр на Python

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

  Интерактивность — ключевой компонент любого современного сайта. И одним из наиболее часто используемых событий для создания интерактивности является событие onclick . В этой статье мы подробно разберёмся, что такое событие onclick , как его использовать и приведем примеры применения.

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

  Как использовать onclick

  Событие при клике на кнопку

  Для привязки события к элементу используйте атрибут onclick в HTML или добавьте слушатель события в JavaScript.

  Нажми меня 

  document.getElementById('myButton').onclick = myFunction; function myFunction()

  Изменение стилей через onclick

  Можно использовать onclick , чтобы изменять стили элементов в ответ на действия пользователя.

  Кликни по мне!
   Изменить цвет 

  function changeColor()

  Скрыть элементы через onclick

  С помощью onclick можно показывать или скрывать различные части сайта.

  function toggleVisibility() < let element = document.getElementById('hiddenDiv'); if (element.style.display === 'none') < element.style.display = 'block'; >else < element.style.display = 'none'; >> 

  Показать/Скрыть 
  Скрытый текст
   

  Загрузка данных через AJAX

  onclick можно использовать для загрузки данных с сервера без перезагрузки страницы (с помощью AJAX).

  function fetchData() < // Здесь ваш код для AJAX-запроса >Загрузить данные 

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

  «Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

  Похожие публикации:

  1. Как переключить вид резисторов в микро кап
  2. Как сделать кнопку активной в html
  3. Какие материнские платы поддерживают windows 7
  4. Какие форматы поддерживает quicktime player