If you have a delay of 1000ms and send three events in rapid succession, it will fire the first event, wait one second and then fire the third event.
yarn add lodash-es
you will be able to use a version of the library that supports tree shaking. This means that Webpack will only grab the minimum code required, keeping your production JS bundle size tiny.scroll
function on a Stimulus controller named event
. When the controller is attached to the div
at page load, connect
is fired, StimulusReflex is instantiated and we use the Lodash debounce
function to return a new event handler that will execute when the page is scrolled but then stops scrolling for at least a second. We could set a maxWait
option if we were worried about users who just won't stop scrolling, but that's as weird as it sounds and qualifies as premature optimisation.stimulate
and pass the current scroll offset of the browser window to the server as an integer argument. The server reflex executes the scroll method and it can do whatever you would like it to do.throttle
with default parameters has the example same form and syntax as debounce
.keydown
and keyup
indicate which key is pressed, while keypress
indicates which character was entered. A lowercase "a" will be reported as 65 by keydown
and keyup
, but as 97 by keypress
. An uppercase "A" is reported as 65 by all events.keydown
, keypress
and keyup
can be declared on any receiver including document
. The input
event can only be captured for an input
, select
or textarea
HTML element. Choose the right event depending on your needs.w
to move forward, this is your event.event.target.value
it gives you the value of the element (usually a text box) before the key was pressed. Many developers have lost many hairs trying to hunt down bugs on their keydown
handlers; don't make the same mistake.keydown
by testing the repeat
attribute to see if one key is being held down.keydown
, keypress
returns the previous value when you access event.target.value
. However, it only fires for keys that product a character value, so for example the Escape key is off-limits, as are Alt
, Shift
, Ctrl
and Meta
.w
one time:keypress
event is technically deprecated even if it's still widely used.keyup
is the direct counterpart of keydown
there are some important differences.event.target.value
returns the value of the text box as it currently appears, with any new changes reflected.keyup
will not fire if you paste text into an input element. It doesn't care that anything has changed; it's only aware of keys being pressed.change
and blur
, input
events can be used to manage the state of input
, textarea
and select
elements. input
is fired every time the value
of the element changes, including when text is pasted. change
only fires when the value
is committed, such as by pressing the enter key or selecting a value from a list of options. blur
fires when focus is lost, even if nothing changed.keypress
, input
cannot give you access to non-character keycodes such as Escape. It should not require debounce because the event is not fired until after any change has occurred. You can access event.target.value
and see the current value of the element.input
(and it's sister event beforeinput
) is that they give you boss powers: the data
attribute on the event is a string containing the change made, which could be a single character or a pasted novel. Meanwhile, the inputType
attribute tells you what kind of change was responsible for the event being fired. With this information, you have the ability to create a timeline log of all changes to a document and even replay them in either direction later.contenteditable
works is far beyond the scope of this document, but you can find more information on what's possible in the W3C Input Events spec.throttle
. We're going to allow the user to mash their keyboard without spamming the server with Reflex updates. However, we only want to throttle if they are holding down a single key: