Jquery нажатие кнопки: jquery нажатие на элемент, ссылку, кнопку пример

Обработчик события вызовет функцию обратного вызова после нажатия кнопки, потому что мы прикрепили щелчок()

Обратите внимание, что поскольку мы использовали метод jQuery HTML() , содержимое отображается только один раз. Даже если мы нажмем кнопку много раз, отобразится только один экземпляр элемента

. Если бы мы хотели отображать строку каждый раз, когда нажимается кнопка, мы могли бы использовать добавить() вместо HTML() :

 <скрипт>
  $('#btn-primary').click(() => {
    $('.new-content').append("Кнопка нажата!")
  })
 

Трехкратное нажатие на кнопку приведет к тому, что наша строка будет добавлена ​​к тегу «new content»

трижды:

Это пример нашей функции обратного вызова, которая вызывается каждый раз при нажатии кнопки. Вы заметите jQuery

Заключение

В этой статье мы обсудили, что такое метод jQuery. щелчок() что он делает и где мы обычно его находим. Мы рассмотрели пример прикрепления щелчок() на кнопку и отображение нового содержимого либо один раз после нажатия кнопки, либо столько раз, сколько раз была нажата кнопка.

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

Венера, инженер-программист в Rockbot

Метод jQuery

О нас: Career Karma — это платформа, предназначенная для помощи соискателям в поиске работы, исследовании и подключении к программам профессионального обучения для продвижения по карьерной лестнице. Узнайте о публикации CK.

Что дальше?

• Хотите действовать?

  Подберите лучших буткемпов

Райан Манчестер

Об авторе: Райан — технический писатель в Career Karma, где он освещает языки программирования, технологии и веб-разработку.

on — Alpine.js

x-on позволяет легко запускать код для отправленных событий DOM.

Вот пример простой кнопки, при нажатии на которую появляется предупреждение.

 
 Скажи привет 
 

x-on

может прослушивать только события с именами в нижнем регистре, поскольку атрибуты HTML нечувствительны к регистру. Запись x-on:CLICK будет прослушивать событие с именем click . Если вам нужно прослушивать пользовательское событие с именем camelCase, вы можете использовать помощник .camel , чтобы обойти это ограничение. Кроме того, вы можете использовать x-bind , чтобы прикрепить директиву x-on к элементу в коде javascript (где регистр будет сохранен).

Если x-on: на ваш вкус слишком многословен, вы можете использовать сокращенный синтаксис: @ .

Вот тот же компонент, что и выше, но с использованием сокращенного синтаксиса:

 
 Say Hi
  
 

Если вы хотите получить доступ к собственному объекту события JavaScript из своего выражения, вы можете использовать магию Alpine $event недвижимость.

 
 Say Hi 
 

Кроме того, Alpine также передает объект события в любые методы, на которые есть ссылки без замыкающих скобок. Например:

 
 ... 
 
   
 
  
 

Alpine упрощает прослушивание событий keydown и keyup для определенных клавиш.

Вот пример прослушивания клавиши

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

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

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

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

Модификатор	Клавиша клавиатуры
.смена	Смена
.введите	Введите
.пробел	Космос
.ctrl	Контрол
.cmd	Команда
.мета	Cmd на Mac, клавиша Windows на Windows
.alt	Вариант
.вверх .вниз .влево .вправо	Стрелки вверх/вниз/влево/вправо
. побег	Побег
.вкладка	Вкладка
.caps-lock	Caps Lock
.равно	Равно, =
.период	Период, .
косая черта	Косая черта, /

Прослушиватели событий Alpine представляют собой оболочку для собственных прослушивателей событий DOM. Следовательно, они могут прослушивать ЛЮБОЕ событие DOM, включая пользовательские события.

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

 
 
 
 
 ... 
 
 
 
 

При нажатии кнопки будет вызван слушатель @foo .

Поскольку API .dispatchEvent является подробным, Alpine предлагает $dispatch помощник для упрощения.

Вот тот же компонент, переписанный с магическим свойством $dispatch .

 
 
 
 
 ... 
 
 < /div> 
 

→ Подробнее о $dispatch

Alpine предлагает ряд модификаторов директив для настройки поведения прослушивателей событий.

.prevent

.prevent эквивалентен вызову .preventDefault() внутри прослушивателя объекта события браузера.

 
 
 
 
 Submit 
 
 
 
 

В приведенном выше примере , с .prevent нажатие кнопки НЕ отправит форму на конечную точку /foo . Вместо этого прослушиватель Alpine обработает его и «предотвратит» дальнейшую обработку события.

.stop

Подобно .prevent , .stop эквивалентно вызову .stopPropagation() внутри прослушивателя объекта события браузера.

 
 
 
 
 Click Me 
 
 
 
 

В приведенном выше Например, нажатие кнопки НЕ БУДЕТ регистрировать сообщение. Это потому, что мы немедленно останавливаем распространение события и не позволяем ему «пузыриться» до

 
 
 
 
 Toggle 
 
   
 
 < div x-show="open" @click. outside="open = false"> 
 
 Содержание... 
 
 
 
 
 

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

Это связано с тем, что .outside прослушивает клики, которые НЕ исходят от элемента, на котором он зарегистрирован.

Стоит отметить, что выражение .outside будет оцениваться только тогда, когда элемент, на котором оно зарегистрировано, виден на странице. В противном случае были бы неприятные условия гонки, когда нажатие кнопки «Переключить» также запускало бы @click.outside обработчик, когда он не виден.

.window

При наличии модификатора .window Alpine зарегистрирует прослушиватель событий в корневом объекте window на странице, а не в самом элементе.

 
 
 escape.window="...">...
 
 

Вышеприведенный фрагмент будет прослушивать нажатие клавиши "escape" В ЛЮБОМ МЕСТЕ страницы.

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

.document

.document работает аналогично .window , только он регистрирует слушателей в document global, вместо window global.

.once

Добавляя .once к прослушивателю, вы гарантируете, что обработчик вызывается только ОДИН РАЗ.

 
 ... 
 

.debounce

Иногда бывает полезно "отклонить" обработчик событий так что он вызывается только после определенного периода бездействия (по умолчанию 250 миллисекунд).

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

Теперь, вместо вызова fetchResults после каждого нажатия клавиши, fetchResults будет вызываться только после 250 миллисекунд отсутствия нажатия клавиш.

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

Теперь fetchResults будет вызываться только через 500 миллисекунд бездействия.

.throttle

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

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

Например:

 
 
...
 
 

Приведенный выше пример — отличный вариант использования регулирования. Без .throttle метод handleScroll будет запускаться сотни раз, когда пользователь прокручивает страницу вниз. Это может сильно замедлить работу сайта. Добавляя .throttle , мы гарантируем, что handleScroll вызывается каждые 250 миллисекунд.

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

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

 
 
 window.throttle.750ms="handleScroll">...
 
 

Сейчас , handleScroll будет вызываться каждые 750 миллисекунд.

.self

Добавляя .self в прослушиватель событий, вы гарантируете, что событие возникло в элементе, для которого оно объявлено, а не в дочернем элементе.

 
  
 
 Click Me 
 
   
 
  
 
  
 

В приведенном выше примере мы есть Тег внутри тега . Обычно любой щелчок, происходящий в пределах 9Элемент 0012 (например, ) будет обнаружен прослушивателем @click на кнопке.

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

.camel

 
 
 
 
 ... 
 
 
 
 

Иногда вам может понадобиться прослушивать события camelCased, такие как customEvent в нашем примере. Поскольку CamelCasing внутри HTML-атрибутов не поддерживается, добавление модификатора .camel необходимо Alpine для внутреннего использования CamelCase имени события.

Добавив .camel в приведенный выше пример, Alpine теперь прослушивает customEvent вместо custom-event .

.точка

 
 
 
 
 ... 
 
 
 
 

Подобно модификатору .camelCase , могут быть ситуации, когда вы хотите прослушивать события с точками в своем имени (например, custom.event ). Поскольку точки в названии события зарезервированы Alpine, вам необходимо написать их с дефисами и добавить модификатор . dot .

В приведенном выше примере кода custom-event.dot будет соответствовать имени события обычай.событие .

.passive

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

Если вы отслеживаете события касания, важно добавить .passive к вашим слушателям, чтобы не блокировать производительность прокрутки.

 
 
...
 
 

→ Подробнее о пассивных слушателях

.capture

Добавьте этот модификатор, если вы хотите выполнить этот слушатель на этапе захвата события, например. до того, как событие всплывет от целевого элемента вверх по DOM.