javascript基础学习系列二百七十七：合成事件

最新推荐文章于 2024-07-20 23:54:17 发布

完美句号

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量464

点赞数 13

文章标签： javascript 学习开发语言前端系统架构性能优化架构

本文链接：https://blog.csdn.net/wanmeijuhao/article/details/135881943

版权

合成事件是 DOM3 Events 中新增的，用于处理通常使用 IME 输入时的复杂输入序列。IME 可以让用户输入物理键盘上没有的字符。例如，使用拉丁字母键盘的用户还可以使用 IME 输入日文。IME 通常需要同时按下多个键才能输入一个字符。合成事件用于检测和控制这种输入。合成事件有以下 3 种:
 compositionstart，在 IME 的文本合成系统打开时触发，表示输入即将开始;
 compositionupdate，在新字符插入输入字段时触发;
 compositionend，在 IME 的文本合成系统关闭时触发，表示恢复正常键盘输入。合成事件在很多方面与输入事件很类似。在合成事件触发时，事件目标是接收文本的输入字段。唯
一增加的事件属性是 data，其中包含的值视情况而异:
 在 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);
});

变化事件

DOM2 的变化事件(Mutation Events)是为了在 DOM 发生变化时提供通知。
注意这些事件已经被废弃，浏览器已经在有计划地停止对它们的支持。变化事件已经被 Mutation Observers 所取代，可以参考第 14 章中的介绍。
DOM 规范并未涵盖浏览器都支持的所有事件。很多浏览器根据特定的用户需求或使用场景实现了 22 自定义事件。HTML5 详尽地列出了浏览器支持的所有事件。本节讨论 HTML5 中得到浏览器较好支持
的一些事件。注意这些并不是浏览器支持的所有事件。(本书后面也会涉及一些其他事件。)

1. contextmenu 事件

Windows 95 通过单击鼠标右键为 PC 用户增加了上下文菜单的概念。不久，这个概念也在 Web 上得以实现。开发者面临的问题是如何确定何时该显示上下文菜单(在 Windows 上是右击鼠标，在 Mac 上是 Ctrl+单击)，以及如何避免默认的上下文菜单起作用。结果就出现了 contextmenu 事件，以专门用于表示何时该显示上下文菜单，从而允许开发者取消默认的上下文菜单并提供自定义菜单。
contextmenu 事件冒泡，因此只要给 document 指定一个事件处理程序就可以处理页面上的所有同类事件。事件目标是触发操作的元素。这个事件在所有浏览器中都可以取消，在 DOM 合规的浏览器中使用 event.preventDefault()，在 IE8 及更早版本中将 event.returnValue 设置为 false。 contextmenu 事件应该算一种鼠标事件，因此 event 对象上的很多属性都与光标位置有关。通常，自定义的上下文菜单都是通过 oncontextmenu 事件处理程序触发显示，并通过 onclick 事件处理程序触发隐藏的。来看下面的例子:

   <!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>
    </body>
    </html>

这个例子中的

元素有一个上下文菜单

。作为上下文菜单，
- 元素初始时是隐藏的。以下是实现上下文菜单功能的 JavaScript 代码:

   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";
}); });

这里在

元素上指定了一个 oncontextmenu 事件处理程序。这个事件处理程序首先取消默认行，确保不会显示浏览器默认的上下文菜单。接着基于 event 对象的 clientX 和 clientY 属性把

元素放到适当位置。最后一步通过将 visibility 属性设置为"visible"让自定义上下文菜单显示出来。另外，又给 document 添加了一个 onclick 事件处理程序，以便在单击事件发生时隐藏上下文菜单(系统上下文菜单就是这样隐藏的)。
虽然这个例子很简单，但它是网页中所有自定义上下文菜单的基础。在这个简单例子的基础上，再添加一些 CSS，上下文菜单就会更漂亮。

完美句号

关注

13
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
javascript基础学习系列二百七十七：合成事件

合成事件是 DOM3 Events 中新增的，用于处理通常使用 IME 输入时的复杂输入序列。IME 可以让用户输入物理键盘上没有的字符。例如，使用拉丁字母键盘的用户还可以使用 IME 输入日文。IME 通常需要同时按下多个键才能输入一个字符。合成事件用于检测和控制这种输入。合成事件有以下 3 种: compositionstart，在 IME 的文本合成系统打开时触发，表示输入即将开始; compositionupdate，在新字符插入输入字段时触发;
复制链接

扫一扫