事件:change、input、cut、copy 和 paste

下面让我们来讨论一下伴随数据更新的各种事件。

事件:change

change 事件是在元素变化结束之后触发的。

对于文本输入框来说,当其失去焦点的时候就会触发 change 事件。

例如,当我们在下面的文本区域中输入的时候,change 事件不会被触发。但是当我们将焦点移到别处时,例如点击按钮,就会触发 change 事件:

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

对于其它元素:selectinput type=checkbox/radiochange 事件会在选项变化后立即触发。

事件:input

每当输入的值发生改变时,就会触发 input 事件。

例如:

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

如果我们想要处理 <input> 的每次变化,那么使用该事件就是最好的选择。

与键盘事件不同,只要值改变了,input 事件就会触发,甚至包括不使用键盘的操作:使用鼠标粘贴或者使用语音识别来输入文字。

oninput 不能阻止任何事件

当输入值变化之后,input 事件就会触发。

所以在这里我们无法使用 event.preventDefault() — 已经太迟了,不会有任何作用了。

事件:cut、copy 和 paste

这些事件发生于剪切/拷贝/粘贴一个值的时候。

它们属于 ClipboardEvent 类,并且提供对拷贝/粘贴的数据的访问方法。

我们也可以使用 event.preventDefault() 来终止操作。

例如,下面的代码阻止了所有的这样的事件,然后展示出了我们尝试剪切/拷贝/粘贴的内容:

<input type="text" id="input">
<script>
  input.oncut = input.oncopy = input.onpaste = function(event) {
    alert(event.type + ' - ' + event.clipboardData.getData('text/plain'));
    return false;
  };
</script>

从技术上来讲,我们可以拷贝/粘贴任何东西。例如,我们可以从资源管理器中拷贝一份文件,然后粘贴进来。

设计规范中有一系列的方法,可以作用于不同的数据类型,对剪贴板进行读写。

但是请注意,剪贴板是“全局”操作系统级别的。安全起见,大多数浏览器只在一些特定的用户行为下允许读写剪贴板。除了火狐浏览器,其它浏览器也都是禁止创建“自定义”剪贴板事件的。

总结

数据变化事件:

事件 描述 特性
change 值被改变。 对于文本输入框,当失去焦点时触发。
input 文本输入框的每次变化。 立即触发,与 change 不同。
cut/copy/paste 剪贴/拷贝/粘贴行为。 行为可以被阻止。event.clipboardData 属性可以读写剪贴板。

任务

重要程度: 5

创建一个界面,允许输入银行存款的总和以及利率,然后计算过了一段时间后会达到多少钱。

这里是例子:

当输入有变化时,应立即进行处理。

公式如下:

// initial: 总存款的初始值
// interest: e.g. 0.05 意味着每年涨幅 5%
// years: 需要等待多少年
let result = Math.round(initial * (1 + interest * years));

打开一个任务沙箱。

教程路线图

评论

在评论之前先阅读本内容…
  • 欢迎你在文章下添加补充内容、提出你的问题或回答提出的问题。
  • 使用 <code> 标签插入几行代码,对于多行代码 — 可以使用 <pre>,对于超过十行的代码 — 建议使用沙箱(plnkrJSBincodepen 等)。
  • 如果你无法理解文章中的内容 — 请详细说明。