# # @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

1. Syntax for listening to custom events:

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

2. 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>