# @on

The @on directive is typically used to listen to events triggered on a component, including custom events within the component and native DOM events, and can accept an expression to be executed after the event is triggered.

# Usage

Syntax for listening to custom events:

<component @on.custom-event-name="expression"></component>

Syntax for listening to native DOM events:

<component @on.native.click="expression"></component>

# Example

The following example demonstrates the usage of the custom events and native DOM events through two buttons. Please click the run button to start the example:

<html>
    <template id="layout-template">
        <webpdf>
            <div>
                <custom:listener></custom:listener>
            </div>
            <div class="fv__ui-body">
                <viewer></viewer>
            </div>
        </webpdf>
    </template>
</html>
<script>
    const { SeniorComponentFactory, modular } = UIExtension;
    class EventEmitterComponent extends SeniorComponentFactory.createSuperClass({
        template: `
            <button></button>
        `
    }) {
        static getName() {
            return 'emitter'
        }
        mounted() {
            super.mounted();
            this.trigger('foo')
        }
    }

    class EventListenerComponent extends SeniorComponentFactory.createSuperClass({
        template: `
            <div @var.self="$component">
                <custom:emitter @on.foo="self.onFoo()" @on.native.click="self.onNativeClick()" @cannotBeDisabled >Mouse click</custom:emitter>
            </div>
        `
    }) {
        static getName() {
            return 'listener'
        }
        onFoo() {
            alert('on foo'); // The emitter component will immediately trigger the foo event after mounted.
        }
        onNativeClick() {
            alert('on native click event'); // Clicking on the emitter component will trigger the click event.
        }
    }

    modular.module('custom', [])
        .registerComponent(EventEmitterComponent)
        .registerComponent(EventListenerComponent)
        ;

    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function() {
            return document.getElementById('layout-template').innerHTML;
        }
    });
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
            viewerOptions: {
                libPath: libPath,
                jr: {
                    licenseSN: licenseSN,
                    licenseKey: licenseKey
                }
            },
            renderTo: document.body,
            appearance: CustomAppearance,
            addons: []
    });
</script>

← @require-modules Introduction to addons →