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上。

 

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

 

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

相关推荐

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

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

CKEditor5正确添加插件的方法

CKEditor5添加插件错误ckeditor-duplicated-modules本来想在CKEditor 5的ckeditor5-build-classic添加一个Code Block插件,按官方文档,先安装@ckeditor/ckeditor5-code-blocknpm install --save @ckeditor/ckeditor5-code-block然后再代码中引入使用:impo

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

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

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)