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 );

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

由此可以看出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 );

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

 

 

版权声明:著作权归作者所有。

相关推荐

Angular使用keydown监听tab键事件处理

在html中,在焦点元素上按下tab键,它会跳到下一个可聚焦元素(按钮、输入等)。如果监听的是keyup,当按下tab放开时,焦点元素已经变为下一个可聚焦元素。在前面的焦点元素上做监听keyup是不会触发事件的处理handler的。为了避免焦点元素的变化这个问题,可以使用keydown监听tab键。Angular监听tab键示例示例:<input (keydown.Tab)="onKey($

JavaScript 点击事件只执行一次的方法

JavaScript要实现只允许Button被点击执行一次的办法有几种:方法一、在添加事件监听器时,设置选项once为true示例:<div id="btn0"> My button</div><script> function doSomething(v) { console.log(v); } document.getE

纯JavaScript检测页面是否加载完成(理解JavaScript页面加载事件)

JavaScript与页面加载相关的事件先介绍JavaScript与页面加载相关的几个事件:document.readystatechangereadystatechage事件会监控document.readyState。readyState有三个值:loading:文档正在加载interactive:文档已加载完成且已被解析,但子资源(如image,css,iframe等)仍在加载。comple

RecyclerView添加点击事件监听器

实现RecyclerView.OnItemTouchListener的项目触摸监听器:import android.content.Context; import android.support.v7.widget.RecyclerView; import android.view.GestureDetector; import android.view.M

JavaScript:给动态元素绑定事件

JavaScript给动态添加的元素绑定事件有几种方式:方法一:jQuery使用jQuery.fn.on可以很简单为动态元素绑定事件:$(staticAncestors).on(eventName, dynamicChild, function() {}); staticAncestors:静态的祖先元素选择器eventName:事件名,如click等dynamicC

JavaScript监控元素外的点击事件隐藏元素

监控document的点击事件,使用jquery的closet排除指定元素以及其子元素的点击事件。function hideOnClickOutside(selector) {   $(document).on('click',function(event){     if (!$(event.target)