CKEditor5事件系统(视图事件冒泡)

CK5的视图(view.document)不仅是一个Observable和emitter，而且还实现了一个BubblingEmitter,它是由BubblingEmitterMixin实现的。它提供了在虚拟dom机制上的冒泡事件。

 

它与普通的dom树上的冒泡机制不同。它不会在特定的元素上注册监听器，而是在指定的上下文上注册监听器。

这里的上下文，要么是一个元素，要么是虚拟上下文之一，要么是匹配节点的回调函数。

 

注册在视图元素上的监听器

this.listenTo( view.document, 'enter', ( evt, data ) => {
   // ...
}, { context: 'blockquote' } );
this.listenTo( view.document, 'enter', ( evt, data ) => {
   // ...
}, { context: 'li' } );

这里的监听器注册在blockquote和li元素上。

注册在虚拟上下文中的监听器

this.listenTo( view.document, 'arrowKey', ( evt, data ) => {
   // ...
}, { context: '$text', priority: 'high' } );
this.listenTo( view.document, 'arrowKey', ( evt, data ) => {
   // ...
}, { context: '$root' } );
this.listenTo( view.document, 'arrowKey', ( evt, data ) => {
   // ...
}, { context: '$capture' } );

这里的监听器注册在$text, $root和$capture上。

注册在自定义回调函数的上下文上的监听器

import { isWidget } from '@ckeditor/ckeditor5-widget/src/utils';
this.listenTo( view.document, 'arrowKey', ( evt, data ) => {
   // ...
}, { context: isWidget } );
this.listenTo( view.document, 'arrowKey', ( evt, data ) => {
   // ...
}, { context: isWidget, priority: 'high' } );

这里的监听器注册在isWidget上。

 

这里我们只需要知道有这三种情况就好，以后我们会用例子来说明事件的传播顺序。