web前端之中文输入法导致的高频事件、addEventListener、compositionstart、compositionend

MENU

  • 代码
  • compositionend
  • compositionstart
  • addEventListener


代码

html

<input type="text" />

JavaScript

var inp = document.querySelector('input');
let isComposing = false;function search() {if (isComposing) return false;console.log('搜索: ', inp.value);
}inp.addEventListener('input', function () {search();
});inp.addEventListener('compositionstart', function () {isComposing = true;
});inp.addEventListener('compositionend', function () {isComposing = false;search();
});

compositionend

MDN

当文本段落的组成完成或取消时,compositionend事件将被触发(具有特殊字符的触发,需要一系列键和其他输入,如语音识别或移动中的字词建议)。


compositionstart

MDN

文本合成系统如input method editor(即输入法编辑器)开始新的输入合成时会触发compositionstart事件。


addEventListener

w3school
定义

addEventListener()方法将事件处理程序附加到元素。

参数描述
type

必需。事件的名称。

请不要使用 "on" 前缀。

请使用 "click" 而不是 "onclick"。


DOM事件的完整列表

function 必需。事件发生时运行的函数。
useCapture

可选(default = false)。

  • false - 处理程序在冒泡阶段执行。
  • true - 处理程序在捕获阶段执行。

技术细节

该方法将把指定的事件监听器函数添加到当前节点的监听器集合中,以处理指定类型type的事件。如果useCapturetrue,则监听器被注册为捕捉事件监听器。如果useCapturefalse,它被注册为普通事件监听器。
addEventListener()可能被调用多次,在同一个节点上为同一种类型的事件注册多个事件句柄。但要注意,DOM不能确定多个事件句柄被调用的顺序。
如果一个事件监听器函数在同一个节点上用相同的typeuseCapture参数注册了两次,那么第二次注册将被忽略。如果正在处理一个节点上的事件时,在这个节点上注册了一个新的事件监听器,则不会为那个事件调用新的事件监听器。
当用Node.cloneNode()方法或Document.importNode()方法复制一个Document节点时,不会复制为原始节点注册的事件监听器。
这个方法也在Document和Window对象上定义了,而且工作方式类似。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/215013.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

(企业 / 公司项目) 企业项目如何使用jwt?

按照企业的项目然后写的小demo&#xff0c; 自己搞一个登录接口然后调用jwtUtil工具类 后端实现 创建一个通用模块common来实现jwt生成token 登录注册的基本实现逻辑思路 面试| ProcessOn免费在线作图,在线流程图,在线思维导图 注释挺详细的jwtUtil工具类&#xff0c; 封装的…

WPF仿网易云搭建笔记(5):信息流控制之IOC容器

文章目录 专栏和Gitee仓库前言IOC容器Prism IOC使用声明两个测试的服务类MainWindow IOC 注入[单例]MainWindow里面获取UserController无法使用官方解决方案 使用自定义IOC容器&#xff0c;完美解决既然Prism不好用&#xff0c;直接上微软的IOC解决方案App.xaml.csViewModel里面…

网络测试工具:tcping-测试端口连接

网络测试工具&#xff1a;tcping-测试端口连接 平常使用的ping&#xff0c;是通过icmp协议去测试网络连通性的&#xff0c;tcping是通过tcp三次握手测试端口的连通性。总的来说&#xff0c;ping测试的是L3的连通性&#xff0c;tcping测试的是L4的连通性。 tcping工具下载 htt…

10.RIP路由信息协议

10.RIP 网段经常产生变化的话&#xff0c;建议使用动态路由协议&#xff0c;当网段发生变化的时候会自动通告给其他路由器 它不看链路的带宽&#xff0c;只看链路中的跳数&#xff0c;只要是跳数多的&#xff0c;不管带宽有多大&#xff0c;它就认为是不好的 RIP跳数有限 …

java中LinkedList和List继承有什么区别?

在Java中&#xff0c;LinkedList 和 List 是两个不同的概念。List 是一个接口&#xff0c;而 LinkedList 是实现了 List 接口的一个具体类。 List 接口&#xff1a; List 是Java集合框架中的一个接口&#xff0c;它表示有序的集合&#xff0c;允许重复元素。List 接口继承自 C…

TYPE-C接口设备实现DRP+OTG功能芯片

随着USB-C接口的普及&#xff0c;欧盟的法律法规强制越来越多的设备开始采用这种接口。由于 USB-C接口的高效性和便携性&#xff0c;使各种设备之间的连接和数据传输变得非常方便快捷&#xff0c;它们不仅提供了强大的功能&#xff0c;还为我们的日常生活和工作带来了极大的便利…

青少年CTF-Misc(持续更新中)

FLAG&#xff1a;当觉得自己很菜的时候&#xff0c;就静下心来学习 专研方向:Web安全&#xff0c;CTF 每日emo&#xff1a;听一千遍反方向的钟&#xff0c;我们能回到过去吗&#xff1f; 1.StegoTXT&#xff1a; 解压缩文件。发现字母中存在覆盖。使用0宽隐写在线解密得到flag…

YOLOv8改进 | 2023主干篇 | EfficientViT替换Backbone(高效的视觉变换网络)

一、本文介绍 本文给大家带来的改进机制是EfficientViT&#xff08;高效的视觉变换网络&#xff09;&#xff0c;EfficientViT的核心是一种轻量级的多尺度线性注意力模块&#xff0c;能够在只使用硬件高效操作的情况下实现全局感受野和多尺度学习。本文带来是2023年的最新版本…

​sqlite3 --- SQLite 数据库 DB-API 2.0 接口模块​

源代码&#xff1a; Lib/sqlite3/ SQLite 是一个C语言库&#xff0c;它可以提供一种轻量级的基于磁盘的数据库&#xff0c;这种数据库不需要独立的服务器进程&#xff0c;也允许需要使用一种非标准的 SQL 查询语言来访问它。一些应用程序可以使用 SQLite 作为内部数据存储。可…

量子算力引领未来!玻色量子出席第二届CCF量子计算大会

​8月19日至20日&#xff0c;中国计算机学会&#xff08;CCF&#xff09;主办的第二届CCF量子计算大会暨中国量子计算峰会&#xff08;CQCC 2023&#xff09;在中国合肥成功举办。本届大会以“量超融合&#xff0c;大国算力”为主题&#xff0c;设有量子计算软件、硬件、应用生…

【C++类模板对象做函数参数】

类模板实例化出的对象&#xff0c;向函数传参的方式 一共有三种传入方式&#xff1a; 指定传入的类型 — 直接显示对象的数据类型参数模板化 — 将对象中的参数变为模板进行传递整个类模板化 — 将这个对象类型 模板化进行传递 总结&#xff1a;比较广泛使用的是第一种&…

计算机网络(三)

&#xff08;十一&#xff09;路由算法 A、路由算法分类 动态路由和静态路由 静态路由&#xff1a;人工配制&#xff0c;路由信息更新慢&#xff0c;优先级高。这种在实际网络中要投入成本大&#xff0c;准确但是可行性弱。 动态路由&#xff1a;路由更新快&#xff0c;自动…

12/11

完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后&#xff0c;关闭登录界面&#xff0c;跳转到其他界面 如果账号和密码不匹配&#xf…

css的Grid布局

1.简单布局 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr; 布局样式 column-gap: 24px; 列间距 row-gap: 24px; 行间距 } 2.排列布局 center垂直方向居中对其 end靠下对齐 3.水平方向对齐 center居中 end靠右对齐 space-between两段对齐 4.对…

【SpringBoot】Spring Boot 单体应用升级 Spring Cloud 微服务

Spring Cloud 是在 Spring Boot 之上构建的一套微服务生态体系&#xff0c;包括服务发现、配置中心、限流降级、分布式事务、异步消息等&#xff0c;因此通过增加依赖、注解等简单的四步即可完成 Spring Boot 应用到 Spring Cloud 升级。 Spring Boot 应用升级为 Spring Cloud…

插入排序和希尔排序

目录 前言 一.插入排序 1.思想 2.实现 3.特点 二,希尔排序 1.思想 2,实现 3.特点 前言 排序算法是计算机科学中的基础工具之一&#xff0c;对于数据处理和算法设计有着深远的影响。了解不同排序算法的特性和适用场景&#xff0c;能够帮助程序员在特定情况下选择最合适的…

如何使用玻璃材质制作3D钻石模型

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 当谈到游戏角色的3D模型风格时&#xff0c;有几种不同的风格&#xf…

Spark与PySpark(1.概述、框架、模块)

目录 1.Spark 概念 2. Hadoop和Spark的对比 3. Spark特点 3.1 运行速度快 3.2 简单易用 3.3 通用性强 3.4 可以允许运行在很多地方 4. Spark框架模块 4.1 Spark Core 4.2 SparkSQL 4.3 SparkStreaming 4.4 MLlib 4.5 GraphX 5. Spark的运行模式 5.1 本地模式(单机) Local运行模…

初识Vue 解决vue在启动时生成的提示

让我为大家简单介绍一下吧&#xff01; Vue是一套用于构建用户界面的渐进式javaScript框架 当我们引入vue.js后 <script src"../js/vue.js"></script>我们发现&#xff0c;当我们打开网页时&#xff0c;控制台会出现以下内容 那我们该怎么解决呢&…

【设计模式--结构型--组合模式】

设计模式--结构型--组合模式 组合模式定义结构案例组合模式的分类优点使用场景 组合模式 定义 又称部分整体模式&#xff0c;是用于把一组相似的对象当作一个单一的对象。组合模式依据树型结构来组合对象&#xff0c;用来表示部分以及整体层次&#xff0c;这种类型的设计模式…