最近在閱讀Element-UI的input組件源碼時，發(fā)現(xiàn)其使用了composition事件：

<input
  :tabindex="tabindex"
  v-if="type !== 'textarea'"
  class="el-input__inner"
  v-bind="$attrs"
  :type="type"
  :disabled="inputDisabled"
  :readonly="readonly"
  :autocomplete="autoComplete || autocomplete"
  :value="currentValue"
  ref="input"
  @compositionstart="handleComposition"        // 注意這里！
  @compositionupdate="handleComposition"   // 注意這里!
  @compositionend="handleComposition"        // 注意這里!
  @input="handleInput"
  @focus="handleFocus"
  @blur="handleBlur"
  @change="handleChange"
  :aria-label="label"
>

印象里紅皮書好像有提到過，但已經(jīng)記不清有什么作用了，趁此機會學習下。

composition event，即復合事件，用于處理IME的輸入序列。
IME（Input Method Editor，輸入法編輯器）可以讓用戶輸入在物理鍵盤上找不到的字符。
其實就是我們用中文輸入法時，出現(xiàn)的顯示中文的框：

image.png

composition event包括三個事件：

• compositonstart: 在IME的文本復合系統(tǒng)打開時觸發(fā)，表示要開始輸入例如(輸入法出現(xiàn)的那一刻)
• compositionupdate: 在向輸入字段中插入新字符時觸發(fā)（使用輸入法輸入的過程中）
• compositionend: 在IME的文本復合系統(tǒng)關(guān)閉時觸發(fā)，表示返回正常鍵盤輸入狀態(tài)(選中文字，輸入法消失的那一刻)

那Element-UI為什么要使用composition event呢？
這其實跟composition event的作用有關(guān)，我們來看下compotion event與input event的觸發(fā)順序：

image.png

可以看到，首先輸入法出現(xiàn)，觸發(fā)了compositonstart事件，然后分別輸入'w'和'o'，先是觸發(fā)compositionupdate事件，再是觸發(fā)input事件。當然，如果選擇了中文，會觸發(fā)compositionend事件。
這里的重點是，在拼音還未轉(zhuǎn)化成中文的時候，同時有兩個輸入框存在：

• 頁面上的input輸入框
• 輸入法的輸入框

兩者分別會觸發(fā)input和compositionupdate事件。這樣問題就出現(xiàn)了，用過Element-UI或者類似UI庫的同學都知道，input組件多數(shù)情況下都是配合著form組件使用的，既然是表單，那也離不開表單驗證了。那么問題就在于，如果是通過input事件來觸發(fā)驗證的，輸入的是字符，那倒沒什么問題。可要是輸入的是中文（或者其它需要組合拼出來的語言），比如，要輸入'我'，在拼音還沒轉(zhuǎn)換之前，網(wǎng)頁輸入框中的內(nèi)容時'wo'，也會觸發(fā)驗證，這并不是我們想要的！

因此，我們可以使用復合事件，通過一個變量來判斷是否是在composition event中，是，就不去觸發(fā)input事件。
當然，Element-UI也是這么做：

handleComposition(event) {
  if (event.type === 'compositionend') {
    this.isOnComposition = false;
    this.currentValue = this.valueBeforeComposition;
    this.valueBeforeComposition = null;
    this.handleInput(event);
  } else {
    const text = event.target.value;
    const lastCharacter = text[text.length - 1] || '';
    this.isOnComposition = !isKorean(lastCharacter);
    if (this.isOnComposition && event.type === 'compositionstart') {
      this.valueBeforeComposition = text;
    }
  }
}

該方法是composition event的統(tǒng)一處理方法，this.isOnComposition用來判是否開啟了輸入法，在compositionend事件觸發(fā)時，將this.isOnCompostion = false; 表明輸入法已關(guān)閉，再去執(zhí)行this.handleInput，即input事件的處理方法。

handleInput(event) {
  const value = event.target.value;
  this.setCurrentValue(value);
  if (this.isOnComposition) return;
  this.$emit('input', value);
}

在handleInput方法中，可以看到，若this.isOnComposition為true，是不會執(zhí)行this.$('input', value);的，即不會向父組件派發(fā)input事件，如果父組件是form組件，也就不會去觸發(fā)表單驗證了。