复合事件

复合事件是 DOM3 中新增的一类事件,用于处理 IME 的输入序列

IME(输入法编辑器)通常用于输入物理键盘上找不到的字符,而这种输入方式通常需要同时按住多个键,但最终只输入一个字符

复合事件就是针对检测和处理这种输入而设计的

复合事件有以下三种:

  1. compositionstart:在IME的文本复合系统打开时触发
  2. compositionupdate:向输入字段中插入新字符时触发
  3. compositionend:在IME的文本复合系统关闭时触发,表示返回键盘的正常输入状态

在大体上复合事件与文本事件在很多方面相似

在其触发时,目标是接收文本的输入字段,但它比文本事件对象多一个data属性

data属性的值,为以下值中的一个:

  • 在触发 compositionstart 时,值为正在编辑的文本
  • 在触发 compositionupdate 时,值为正在插入的文本
  • 在触发 compositionend 时,值为此次操作已经插入的字符
  • 否则为空字符串

复合事件可冒泡

详见MDN

对于是否支持复合事件,可以使用以下代码检测:

var isSupported = document.implementation.hasFeature("CompositionEvent","3.0");

Javascript高级编程学习笔记(65)—— 事件(9)复合事件的更多相关文章

  1. JavaScript高级程序设计学习笔记之事件

    1.事件流 事件流描述的是从页面中接收事件的顺序. 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播 ...

  2. Javascript高级编程学习笔记(57)—— 事件(1)事件流

    事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事 ...

  3. Javascript高级编程学习笔记(72)—— 模拟事件(2)IE事件模拟

    IE中的事件模拟 低版本的IE浏览器作为前端开发的一股清流,想避过都不行 虽然低版本IE正在逐步被市场淘汰,不得不承认IE8以下的浏览器依然占了不小的份额 所以这里大概介绍IE8以下的低版本IE中的事 ...

  4. Javascript高级编程学习笔记(71)—— 模拟事件(1)DOM事件模拟

    事件,指的是网页中某个特定的交互时刻 一般来说事件由浏览器厂商负责提供,一般由用户操作或者其它浏览器功能来触发 但是有一类特殊的事件,那就是由我们开发人员通过JS触发的事件 这些事件和浏览器创建的事件 ...

  5. Javascript高级编程学习笔记(70)—— 事件(14)内存和性能

    由于事件处理程序是现代的web程序交互能力的提供者 所以在日常实践中,我们免不了要向页面中添加大量的事件处理程序(不管是用于用户交互还是用于统计用户数据) 在创建GUI(图形用户界面)的语言(如C#) ...

  6. Javascript高级编程学习笔记(69)—— 事件(13)触摸与手势事件

    触摸与手势事件 由于移动设备既没有鼠标也没有键盘,所以在为移动浏览器开发交互性网页时,常规的鼠标键盘事件根本不够用 所以早期的苹果为Safari 添加了一些与触摸相关的事件 随着后面Android的W ...

  7. Javascript高级编程学习笔记(68)—— 事件(12)设备事件

    设备事件 随着智能手机与平板电脑的普及,为了更好地让用户与这些设备进行交互 浏览器引入了一种新的方式,而一类新的事件也应运而生,这就是设备事件 W3C从2011年开始制定关于设备事件的草案 下面将会介 ...

  8. Javascript高级编程学习笔记(67)—— 事件(11)HTML5事件

    DOM规范没有涵盖所有浏览器支持的所有事件 而许多浏览器出于满足用户需求,或解决特殊问题的目的,实现了一些自定义事件 HTML5列出了浏览器应该支持的所有事件,这里只讨论得到浏览器完善支持的事件(并非 ...

  9. Javascript高级编程学习笔记(66)—— 事件(10)变动事件

    变动事件 DOM2级的变动事件,能在DOM中的一部分发生变化时给出提示 变动事件是为XML或HTML DOM 设计的,并不特定于某种语言 DOM2级定义了如下变动事件: DOMSubtreeModif ...

随机推荐

  1. 设计模式之装饰者模式-java实例

    设计模式之装饰者模式 需求场景 我们有了别人提供的产品,但是别人提供的产品对我们来说还不够完善,我们需要对这个产品的功能进行补强,此时可以考虑使用装饰者模式. 我们已经有了产品,而且这个产品的功能非常 ...

  2. C# DataTable抽取Distinct数据(不重复数据)[z]

    DataTable dataTable;       DataView dataView = dataTable.DefaultView;       DataTable dataTableDisti ...

  3. “XmlDocumentationProvider”不实现接口成员“IDocumentationProvider.GetDocumentation(HttpControllerDescriptor)”错误的解决方案

    这东西就是这样,会的不难,难的不会.以前我配置过 WebAPI 的 HelpPage 功能,第一步先安装:Microsoft.AspNet.WebAPi.HelpPage,第二步安装:WebApiTe ...

  4. spring boot生成的war包运行时出现java.lang.NullPointerException: null

    最近写了一个数据库同步的程序,见之前的博客,没有用到spring框架来集成,用的时纯Java代码.然后,项目经理要我把程序合到spring boot框架中,因为涉及到多数据源,时间又比较紧,同意我直接 ...

  5. Mysql 数据库管理

    1. mysql用户和权限 mysql权限控制通过两步控制,第一是能不能连接(验证用户身份),第二是能执行什么操作(验证权限). 其中身份验证,需要验证连接mysql的计算机的IP地址或者计算机名称还 ...

  6. 第一章 odoo的配置(centos7 版)

    一: 简述 (1) odoo是python开发的一款erp软件,目前的最新版本为odoo 11, 支持Python2和Python3, 但odoo 11目测是一个过渡版本,为了稳定,我们还是上odoo ...

  7. Git push 提交代码到远程global user.name错误解决办法

    问题:安装了Git-1.9.4-preview和TortoiseGit等工具后,Git服务器开通了账号和密码并配置了邮箱.克隆了服务器代码到本地,按需求进行代码开发.提交本地代码到服务器时出现错误.具 ...

  8. vue版 文件下载

    标签的download: 是HTML5标准新增的属性,作用是指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件. 这种是定义的接口不是下载文件的路径,而是通过API可以获得文件的 ...

  9. angular的一些东西

    每个人都知道在使用angular的时候只能有一个ng-app指令但是也可以手动创建,这样就可以写很多个模块 例: var app=angular.module('App',[]);var app1=a ...

  10. Mac- appium 环境配置

    一: 下载    appium : https://bitbucket.org/appium/appium.app/downloads/ 下载安装完,打开appium,安全性与隐私设置  检测提示: ...