CKEditor5事件系统(代理事件)

emitter接口提供了事件代理机制。也就是说指定选择的事件能够被其他的emitter触发。

1、代理指定的事件到另一个emitter

let anyClass = new AnyClass();
let anotherClass = new AnyClass();
let oneClass = new AnyClass();
anotherClass.on('bar',(evt,data)=>{
    console.log(evt.source);
    console.log('data',data);
    console.log('bar');
});

oneClass.on('one',(evt,data)=>{
    console.log(evt.source);
    console.log('data',data);
    console.log('one');
});

anyClass.delegate('foo').to(anotherClass,'bar');
anyClass.delegate('foo').to(oneClass,'one');
//anotherClass.fire('bar', 1 );
anyClass.fire('foo', 1 );

以上代码打印出来的日志信息如下：

<figure class="image"></figure>由此可以看出anyClass将foo事件代理到了anotherClass和oneClass。同时还给被代理的事件名称改了个名字。

这里需要注意的是：delegate A to B 这里的B才是被代理的emitter，可以看看一下代码：

let anyClass = new AnyClass();
let anotherClass = new AnyClass();

anyClass.on('foo',(evt,data)=>{
    console.log(evt.source);
    console.log('data',data);
    console.log('bar');
});
anyClass.delegate('foo').to(anotherClass);           
anotherClass.fire('foo', 1 );

这里我们按照字面意思理解，

定义两个emitter anyClass和anotherClass

anyClass 绑定foo事件

anyClass的foo事件代理到anotherClass这个emitter

anotherClass触发foo事件

然后anyClass应该会执行回调函数。实际上回调函数不会执行，因为anotherClass才是被代理的emitter，只有被代理的emitter上绑定了函数，才会被代理给其他emitter，而被代理emitter回调函数执行需要有其他emitter触发。

emitterA.delegate( 'foo' ).to( emitterB );
emitterA.delegate( 'foo', 'bar' ).to( emitterC );

2、代理到不同名称的事件

emitterA.delegate( 'foo' ).to( emitterB, 'bar' );
emitterA.delegate( 'foo' ).to( emitterB, name => `delegated:${ name }` );

3、代理所有事件

emitterA.delegate( '*' ).to( emitterB );

4、取消代理事件

// Stop delegating all events.
emitterA.stopDelegating();
// Stop delegating a specific event to all emitters.
emitterA.stopDelegating( 'foo' );
// Stop delegating a specific event to a specific emitter.
emitterA.stopDelegating( 'foo', emitterB );

最后一点知识就是代理事件信息，它可以获得事件的名称，事件的来源以及事件的传播路径等。具体可以查看官网。