Event @ Directive

Event handler directives are bound with a @ prefixed attribute. The event that triggered the action is available as $event within the expression.

Event handlers can also have modifiers, indicating what should be done with the event. These are separated by a period and appear after the event name, always in kebab-case. They get changed into camelCase within Fudgel; only lowercase letters are allowed for HTML attributes.

• capture - Dispatch the event to the registered listener before dispatching to any event targets beneath it in the DOM tree.
• document - Bind the event to the document.
• once - Invoke the listener at most once.
• outside - Bind the event to the document and only fire when it happens from outside of the targeted element.
• passive - Signifies that this event is passive and the developer will not call preventDefault on the event, allowing the engine to tweak how the event is processed.
• prevent - Calls preventDefault on the event.
• self - Only fires the event when the click is on the target element.
• stop - Calls stopPropagation on the event.
• window - Bind the event to the window.

To help illustrate how these work, consider the following example:

You can also fire events only when certain key combinations are pressed.

• alt - The alt key must be pressed.
• ctrl - The control key must be pressed.
• meta - The meta key must be pressed, which is the same as the Command key on Mac or Super key on Windows.
• shift - The shift key must be pressed.
• exact - The exact key combination must be pressed. This means using keypress.ctrl.exact only fires when a control-key combination is pressed but will not fire if the shift key is also pressed.

Finally, any other event modifier will be treated as a key value. This means using keypress.a will only fire when the "a" key is pressed. Key values are listed on MDN's Keyboard Event Key Values page. Make sure to use all lowercase and kebab-case names, such as keypress.enter and keypress.arrow-left.

Some keys are difficult to represent as HTML attributes, so you can use their ASCII values or code point values, such as keypress.code-32 for space (hex 0x20, ASCII code point 32) and keypress.code-252 for ü.