Javascript 事件：change，input，cut，copy，paste

讓我們介紹一下伴隨數(shù)據(jù)更新的各種事件。

事件：change

當(dāng)元素更改完成時(shí)，將觸發(fā) change 事件。

對(duì)于文本輸入框，當(dāng)其失去焦點(diǎn)時(shí)，就會(huì)觸發(fā) change 事件。

例如，當(dāng)我們?cè)谙旅娴奈谋咀侄沃墟I入內(nèi)容時(shí) —— 不會(huì)觸發(fā) change 事件。但是，當(dāng)我們將焦點(diǎn)移到其他位置時(shí)，例如，點(diǎn)擊按鈕 —— 就會(huì)觸發(fā) change 事件：

<input type="text" onchange="alert(this.value)">
<input type="button" value="Button">

對(duì)于其它元素：select，input type=checkbox/radio，會(huì)在選項(xiàng)更改后立即觸發(fā) change 事件。

<select onchange="alert(this.value)">
  <option value="">Select something</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

事件：input

每當(dāng)用戶(hù)對(duì)輸入值進(jìn)行修改后，就會(huì)觸發(fā) input 事件。

與鍵盤(pán)事件不同，只要值改變了，input 事件就會(huì)觸發(fā)，即使那些不涉及鍵盤(pán)行為（action）的值的更改也是如此：使用鼠標(biāo)粘貼，或者使用語(yǔ)音識(shí)別來(lái)輸入文本。

例如：

<input type="text" id="input"> oninput: <span id="result"></span>
<script>
  input.oninput = function() {
    result.innerHTML = input.value;
  };
</script>

如果我們想要處理對(duì) <input> 的每次更改，那么此事件是最佳選擇。

另一方面，input 事件不會(huì)在那些不涉及值更改的鍵盤(pán)輸入或其他行為上觸發(fā)，例如在輸入時(shí)按方向鍵 ? ?。

無(wú)法阻止 ?oninput? 中的任何事件

當(dāng)輸入值更改后，就會(huì)觸發(fā) input 事件。

所以，我們無(wú)法使用 event.preventDefault() —— 已經(jīng)太遲了，不會(huì)起任何作用了。

事件：cut，copy，paste

這些事件發(fā)生于剪切/拷貝/粘貼一個(gè)值的時(shí)候。

它們屬于 ClipboardEvent 類(lèi)，并提供了對(duì)剪切/拷貝/粘貼的數(shù)據(jù)的訪(fǎng)問(wèn)方法。

我們也可以使用 event.preventDefault() 來(lái)中止行為，然后什么都不會(huì)被復(fù)制/粘貼。

例如，下面的代碼阻止了剪切/拷貝/粘貼的事件，并顯示出了我們所嘗試剪切/拷貝/粘貼的內(nèi)容：

<input type="text" id="input">
<script>
  input.onpaste = function(event) {
    alert("paste: " + event.clipboardData.getData('text/plain'));
    event.preventDefault();
  };

  input.oncut = input.oncopy = function(event) {
    alert(event.type + '-' + document.getSelection());
    event.preventDefault();
  };
</script>

請(qǐng)注意，在剪切/復(fù)制事件處理程序中調(diào)用 event.clipboardData.getData(...) 只會(huì)得到一個(gè)空字符串。從技術(shù)上講，這是因?yàn)榇藭r(shí)數(shù)據(jù)還未存入剪切板。如果我們使用 event.preventDefault()，則它根本不會(huì)被復(fù)制。

所以上面的例子中使用 document.getSelection() 來(lái)得到被選中的文本。你可以在 選擇（Selection）和范圍（Range） 中了解更多關(guān)于文本選擇（document selection）的細(xì)節(jié)。

我們不僅可以復(fù)制/粘貼文本，也可以復(fù)制/粘貼其他各種內(nèi)容。例如，我們可以在操作系統(tǒng)的文件管理器中復(fù)制一個(gè)文件并進(jìn)行粘貼。

這是因?yàn)?nbsp;clipboardData 實(shí)現(xiàn)了 DataTransfer 接口，通常用于拖放和復(fù)制/粘貼。這超出了本文所討論的范圍，但你可以在 DataTransfer 規(guī)范 中進(jìn)行詳細(xì)了解。

另外，還有一個(gè)可以訪(fǎng)問(wèn)剪切板的異步 API：navigator.clipboard，詳見(jiàn) Clipboard API 和事件規(guī)范，火狐瀏覽器（Firefox）尚未支持。

安全限制

剪貼板是“全局”操作系統(tǒng)級(jí)別的東西。用戶(hù)可能會(huì)在各種應(yīng)用程序之間切換，復(fù)制/粘貼不同的內(nèi)容，而瀏覽器頁(yè)面不應(yīng)該能訪(fǎng)問(wèn)這些內(nèi)容。

因此，大多數(shù)瀏覽器僅允許在某些用戶(hù)操作范圍內(nèi)（例如復(fù)制/粘貼等）對(duì)剪切板進(jìn)行無(wú)縫的讀/寫(xiě)訪(fǎng)問(wèn)。

除火狐（Firefox）瀏覽器外，所有瀏覽器都禁止使用 dispatchEvent 生成“自定義”剪貼板事件，即使我們?cè)O(shè)法調(diào)度此類(lèi)事件。規(guī)范也明確聲明了，合成（syntetic）事件不得提供對(duì)剪切板的訪(fǎng)問(wèn)權(quán)限。

此外，如果有人想將 event.clipboardData 保存在事件處理程序中，然后稍后再訪(fǎng)問(wèn)它 —— 這也不會(huì)生效。

重申，event.clipboardData 僅在用戶(hù)啟動(dòng)的事件處理程序的上下文中生效。

另外, navigator.clipboard 是一個(gè)較新的 API，適用于任何上下文。如果需要，它會(huì)請(qǐng)求用戶(hù)的許可。

總結(jié)

數(shù)據(jù)更改事件:

任務(wù)

存款計(jì)算器

重要程度: 5

創(chuàng)建一個(gè)界面，允許輸入銀行存款總額以及存款利率，然后計(jì)算在給定時(shí)間段后，錢(qián)會(huì)變成多少。

這是示例：

當(dāng)輸入有變化時(shí)，應(yīng)立即進(jìn)行處理。

公式如下：

// initial: 總存款的初始值
// interest: 例如 0.05 意味著每年漲幅 5%
// years: 要等待多少年
let result = Math.round(initial * (1 + interest) ** years);

打開(kāi)一個(gè)任務(wù)沙箱。

解決方案

使用沙箱打開(kāi)解決方案。