Composition Event,中文译为复合事件,是 DOM 3 级事件中新添加的一类事件类型,用于处理 IME 的输入序列。IME(Input Method Editor,输入法编辑器)可以让用户输入在物理键盘上找不到的字符。复合事件就是针对检测和处理这种输入而设计的。也因为以上所述原因,复合事件很少为通常使用拉丁系语言输入的开发者所知(因为拉丁字母都能通过物理键盘输入)。当然,即使是使用非拉丁系语言比如中文作为输入的开发者,也不见得知道复合事件,因为开发中用到该种事件类型的情况比较少见。

IME 复合系统的工作原理如下:缓存用户的键盘输入,直到一个字符被选中后才确定输入。缓存的键盘输入会暂时展示在输入框中,但不会真正被插入到 DOM 中。如下图所示。但是如果在复合事件的过程中改变了输入框的值(比如切换了输入法或者直接按下 enter 键),复合事件将提前结束,同时缓存的键盘输入值将会插入到输入框中。

10:21:17.jpg

复合事件类型包含以下几种事件:

  • compositionstart:当 IME 的文本复合系统打开时触发。
  • compositionend:在 IME 的文本复合系统关闭即用户选中了字符并确定输入时触发,表示返回正常键盘的输入状态。
    -compositionupdate:在 compositionstart 事件触发后,compositionend 事件触发前这段时间内,每次向输入字段中进行输入时均会触发。

注:input 事件将在复合事件后触发。

但是,实际情况与理想还是有一定距离的,复合事件的兼容性比较一般。下图是 MDN 中列出的兼容性表现,详情可见 MDN:

10:24:08.jpg

10:24:13.jpg

综上,在使用复合事件处理 input 相关的问题时,仍然需要慎重。

注:本文参考尤雨溪博客中 DOM COMPOSITION EVENTS COMPATIBILITY NOTES 一文。

支付宝扫码打赏 微信打赏

坚持原创技术分享,您的支持将鼓励我继续创作!

扫描二维码,分享此文章

逆葵's Picture
逆葵

网名逆葵。北邮土著,CS 硕士在读。《Vue.js 权威指南》作者之一。学习、思考、沉淀中, 向成为顶级 JavaScript 技术栈开发者努力。