# @on

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

# 用法

监听自定义事件语法：

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

监听 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>

← @require-modules @retractable 和 @retractable-body →