# # @on

`@on` 指令通常用于监听组件上触发的事件，包括组件中的自定义事件和 DOM 原生事件，并可以接受一个表达式，在事件触发后执行。

## # 用法

1. 监听自定义事件语法：

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

2. 监听 DOM 原生事件的语法：

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

## # 示例

以下示例通过两个按钮展示了自定义事件和 DOM 原生事件的用法。请点击 `run` 按钮启动示例：

    <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'); // emitter 组件在 mounted 之后将立即触发 foo 事件
            }
            onNativeClick() {
                alert('on native click event'); // 点击 emitter 组件后，将触发 click 事件
            }
        }

        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>