JS复合事件

2018年11月22日Web前端0

看到了element-ui库中的input组件，发现了compositionstart、compositionupdate和compositionend三个事件。代码中并没有直接调用的入口，原来这是DOM3级中的复合事件（特地看了下红皮书，书上是有的......）。

一、简介

复合事件是DOM3级事件中新添加的一类事件，用于处理IME的输入序列。IME（Input Method Editor，输入法编辑器）可以让用户输入在物理键盘上找不到的字符。复合事件有三种：compositionstart、compositionupdate和compositionend。他比其他文本事件多了个data属性，可以得到输入值。

浏览器兼容方面，需要IE9+的支持。我们可以通过hasFeature准确的判断浏览器是否支持。

document.implementation.hasFeature("CompositionEvent", "3.0");

二、对比

我们将这三个事件和常用的三个输入事件keydown、keypress和keyup来做比较。

<input id="ipt" type="text" />
document.getElementById('ipt').onkeydown = function() {
    console.log('keydown');
}
document.getElementById('ipt').onkeypress = function() {
    console.log('keypress');
}
document.getElementById('ipt').onkeyup = function() {
    console.log('keyup');
}
document.getElementById('ipt').addEventListener('compositionstart', function(e) {
    console.log('compositionstart', e.data);
});
document.getElementById('ipt').addEventListener('compositionupdate', function(e) {
    console.log('compositionupdate', e.data);
});
document.getElementById('ipt').addEventListener('compositionend', function(e) {
    console.log('compositionend', e.data);
});

在切换到中文输入法后，输入'你'的拼音ni，控制台打印如下：

显示键盘的keydown事件，随即触发了compostionstart方法，表示输入法开启使用了。当有新的值输入时，会触发对应的update事件，但是没有触发keypress事件，连续输入时，值时keydown，compositionupdate，keyup的连续触发。

当我们用空格键确认时，控制台打印如下：

先触发了composition相关的方法才触发keydown。 使用较快的速度打你好的拼音'nihao'，并用空格确定。控制台打印如下：

composition与key系列事件似乎并没有按序触发，但是拆分开来看。

单看composition，先由start，再到update，最后end以及值的状态，都是正确的。 key的事件则是keydown到keyup，分别对应，不过始终没有触发keypress。

JavaScript

目录