Note: The shorthand property for
l-on adds an event listener to the element is is attached to. This means if that event is emited on the element, then it will execute the expression. Check the Events refererence on MDN for more information.
<button l-on:click="key = 'value'">Change value</button>
.global property forces the event listener to be attached to the
document instead of the target element.
.prevent property calls the
preventDefault() on the event when it is called, essentially preventing normal, predefined behavior.
.stop property calls the
stopPropogation() on the event when it is called, essentially preventing bubbling from child elements to parent elements.
.outside property attaches an event handler to the document, conditionally excluding the element it is attached to. This means that it only executes the expression when anything other than the target element is fired. This could be used for modals or special UI elements.
.once property forces the event listener to only be called once, meaning that event calls after will not work. This can be useful for one-time actions, such as loading HTML into the document from Ajax.
.passive property helps with better scroll performance, especially on mobile devices.