Web浏览器的事件类型（交互基础）——键盘与输入事件（贰）

这是我参与更文挑战的第30天，活动详情查看：更文挑战

4.textInput事件

DOM3 Events 规范增加了一个名为 textInput 的事件，它在字符被输入到可编辑区域时触发。textInput 和 keypress 有两个区别：

keypress 会在任何可以获得焦点的元素上触发，而 textInput 只在可以编辑区域触发。
textInput 只在新字符被插入时触发， keypress 对任何影像文本的操作都触发（包括退格键）。

textInput 的 event 对象上提供了一个 data 属性，包含要插入的字符。使用方法如下所示：

let textbox = document.getElementById("myText");
textbox.addEventListener("textInput", (event) => {
  console.log(event.data);
});

event 对象上还有一个名为 inputMethod 的属性，该属性表示向控件中输入文本的手段。可能的值如下：

表示浏览器不能确定是什么输入手段；
表示键盘；
表示粘贴；
表示拖放操作；
表示IME；
表示表单选项；
表示手写；
表示语音；
表示组合方式；
表示脚本；

可以通过上面的值判断用户是如何输入值的。

合成事件

合成事件是 DOM3 Events 中新增的，用于处理通常使用 IME （Input Method Editors）输入时的复杂输入序列。IME 可以让用户输入物理键盘上没有的字符。例如我们的中文就是通过很多字符组合生成的，也就是合成事件。

合成事件有以下3中：

compositionstart: 在 IME 的文本合成系统打开时触发，表示输入即将开始
compositionupdate: 在新字符插入输入字段时触发
compositionend: 在 IME 的文本合成系统关闭时触发，表示恢复正常键盘输入

合成事件的 event 会新增一个 data 属性，包含以下几 3 中情况下的值：

在 compositionstart 事件中，包含正在编辑的文本（例如，已经选择了文本但还没替换）；
在 compositionupdate 事件中，包含要插入的新字符；
在 compositionend 事件中，包含本次合成过程中输入的全部内容。

合成使用方式如下：

let textbox = document.getElementById("myText");
textbox.addEventListener("compositionstart", (event) => {
  console.log(event.data);
});
textbox.addEventListener("compositionupdate", (event) => {
  console.log(event.data);
});
textbox.addEventListener("compositionend", (event) => {
  console.log(event.data);
});

HTML5事件

HTML5 详尽地列出了浏览器支持的所有事件。下面会介绍浏览器较好支持的事件，但也并不是所有浏览器支持。

contextmenu 事件

contextmenu 事件，以专门用于表示何时该显示上下文菜单，从而允许开发者取消默认的上下文菜单并提供自定义菜单。contextmenu 事件冒泡，因此只要给 document 指定一个事件处理程序就可以处理页面上的所有同类事件。contextmenu 事件应该算一种鼠标事件，因此 event 对象上的很多属性都与光标位置有关。来看下面的例子:

<!DOCTYPE html>
<html>
  <head>
    <title>ContextMenu Event Example</title>
  </head>
  <body>
    <div id="myDiv">
      Right click or Ctrl+click me to get a custom context menu. Click anywhere else to get the default context menu.
    </div>
    <ul
      id="myMenu"
      style="position: absolute; visibility: hidden; background-color: silver"
    >
      <li><a href="http://www.somewhere.com"> somewhere</a></li>
      <li><a href="http://www.wrox.com">Wrox site</a></li>
      <li><a href="http://www.somewhere-else.com">somewhere-else</a></li>
    </ul>
    <script>
      window.addEventListener("load", (event) => {
        let div = document.getElementById("myDiv");
        div.addEventListener("contextmenu", (event) => {
          event.preventDefault(); // 阻止默认菜单的展示
          // 展示自定义的菜单
          let menu = document.getElementById("myMenu");
          menu.style.left = event.clientX + "px";
          menu.style.top = event.clientY + "px";
          menu.style.visibility = "visible";
        });
        document.addEventListener("click", (event) => {
          document.getElementById("myMenu").style.visibility = "hidden";
        });
      });
    </script>
  </body>
</html>

引用

[1] JavaScript高级程序设计（第4版）