Document onload: Window: load event — Web APIs

 <шаблон>
    <дел>
         
    

onloadLWC.js

Файл JavaScript содержит методconnectedCallback(), который срабатывает при каждой загрузке компонента. В нашем сценарии мы устанавливаем значение свойства inputValue.

 import {LightningElement, track} из "lwc";
класс экспорта по умолчанию OnloadLWC расширяет LightningElement {
  @отслеживать входное значение;
  // инициализируем компонент
  связанныйCallback () {
    это.inputValue = 5;
  }
} 

onloadLWC.js-meta.xml

Файл конфигурации определяет значения метаданных для компонента, включая конфигурацию проекта для Lightning App Builder и Community Builder.

 
 
 sforce.com/2006/04/metadata" fqn="onloadLWC">
    46.0
    истина
    <цели>
      lightning__RecordPage
      lightning__AppPage
      lightning__HomePage
    
    
 

Демонстрация (onLoad в веб-компоненте Lightning)

Этот компонент показывает пример выполнения каких-либо действий при загрузке веб-компонента Lightning. Здесь мы устанавливаем значение поля ввода равным 5 каждый раз, когда оно загружается.

Вы также хотели бы прочитать мой ответ о платформе Salesforce StackExchange о загрузке Javscript в LWC.

Продолжайте проверять веб-компонент Lightning в дневниках Salesforce на наличие последних обновлений Lightning в Salesforce.

Нравится:

Нравится Загрузка…

LightningLightning componentLightning Web Components

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 magic $event .

 
 Say Hi 
 

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

 
 ... 
 
   
 
  
 

Alpine упрощает прослушивание событий keydown

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

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

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

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

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

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

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

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

  
 
 
 
  target.dispatchEvent(new CustomEvent('foo', { пузыри: true } ))">... 
 
 
 
 

При нажатии кнопки будет вызван слушатель @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Элемент 0009 (например, ) будет обнаружен прослушивателем @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.

No related posts.