【面试官系列】input、change,keydown、keypress、keyup触发的时机是?

简介: 我认为这道题是一个挺有意思的题,但是回答正确的面试者很少,今天我来聊一聊。先上 DJ,哦不对先上 DEMO,测试地址:https://www.lilnong.top/static/html/textarea-event-test.html

事件含义及触发时机


bVbGJIr.webp.jpg


focus、blur


获取焦点 (focus)、失去焦点(blur)。

属于 FocusEvent 接口。


keydown、keypress、keyup


  1. keydown 键盘按下,一直按就一直触发


  1. keypress 按下 产生字符值的键时会触发。如 字母、数字、标点符号。不产生字符值的键的例子是修饰键如 Alt、Shift、Ctrl、backspace 等


  1. keyup 键盘抬起。

属于 KeyboardEvent 接口


input、change


input


输入时实时触发(输入的字符已经可以被获取到),发生在 keypress 之后。

属于 InputEvent 接口


change


可以理解为 失去焦点前判断,如果内容被改变就触发事件。


属于 Event 接口


迎接挑战吧


如何阻止特定字符输入比如回车


keypresskeydown 阻止默认事件即可 preventDefault()


如何判断是输入法


input 事件中有 isComposing 可以用来区分是不是输入法。

而且也可以看到在 Vue 中,输入法状态也没有获取。


前端培训-初级阶段-场景实战(2019-05-30)-input 搜索如何防抖,如何处理中文输入


Vue 中 .lazy 修饰符的作用是什么?


在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述 输入法组合文字时)。


lazy 修饰符会使同步在 change 事件_之后_进行:


<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">


Vue 中 v-model 和 v-model.lazy 使用上有什么要注意的地方吗?


如何让 Vue.js 在 setInterval 实现倒计时的情况下保证 input 正常输入?

测试地址


那些事件会冒泡?


focus、blur 是不会冒泡的,冒泡需要使用 focusin、foucusout。


Vue 中 .native 是用来做什么的?使用上有什么注意的吗?


用来监听自定义组件的原生事件。


这里需要注意:如果监听的事件是不支持冒泡的,那么有可能是监听不到的。


比如 focus,只有根节点是 <input><textarea> 这种可以获取焦点的元素的才可以监听到 demo传送门,如果是 divlabelp 这种无焦点的就无法监听。

相关文章
|
4月前
|
监控 算法 Java
Java面试题:如何在Java中触发一次Full GC?请详细解释垃圾回收机制和知识
Java面试题:如何在Java中触发一次Full GC?请详细解释垃圾回收机制和知识
372 4
|
前端开发
前端面试题:1.页面加载完成(onload)之前触发的事件;2.History,Location,Window,Navigation的区别;3.e.target和e.currentTarget的区别
★Navagator:提供有关浏览器的信息 ★Window: Window对象处于对象层次的最顶层, 它提供了处理Navagator窗口的方法和属性 ★Location:提供了与当前打开的URL-工作的方 法和属性,是一个静态的对象 ★History:提供了与历史清单有关的信息 ★Document:包含与文档元素一起工作的对象,它将这些元素封装起来供编程人员使用
269 0
|
3月前
|
存储 Java
【IO面试题 四】、介绍一下Java的序列化与反序列化
Java的序列化与反序列化允许对象通过实现Serializable接口转换成字节序列并存储或传输,之后可以通过ObjectInputStream和ObjectOutputStream的方法将这些字节序列恢复成对象。
|
8天前
|
存储 算法 Java
大厂面试高频:什么是自旋锁?Java 实现自旋锁的原理?
本文详解自旋锁的概念、优缺点、使用场景及Java实现。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
大厂面试高频:什么是自旋锁?Java 实现自旋锁的原理?
|
9天前
|
存储 缓存 Java
大厂面试必看!Java基本数据类型和包装类的那些坑
本文介绍了Java中的基本数据类型和包装类,包括整数类型、浮点数类型、字符类型和布尔类型。详细讲解了每种类型的特性和应用场景,并探讨了包装类的引入原因、装箱与拆箱机制以及缓存机制。最后总结了面试中常见的相关考点,帮助读者更好地理解和应对面试中的问题。
33 4
|
1月前
|
算法 Java 数据中心
探讨面试常见问题雪花算法、时钟回拨问题,java中优雅的实现方式
【10月更文挑战第2天】在大数据量系统中,分布式ID生成是一个关键问题。为了保证在分布式环境下生成的ID唯一、有序且高效,业界提出了多种解决方案,其中雪花算法(Snowflake Algorithm)是一种广泛应用的分布式ID生成算法。本文将详细介绍雪花算法的原理、实现及其处理时钟回拨问题的方法,并提供Java代码示例。
67 2
|
1月前
|
JSON 安全 前端开发
第二次面试总结 - 宏汉科技 - Java后端开发
本文是作者对宏汉科技Java后端开发岗位的第二次面试总结,面试结果不理想,主要原因是Java基础知识掌握不牢固,文章详细列出了面试中被问到的技术问题及答案,包括字符串相关函数、抽象类与接口的区别、Java创建线程池的方式、回调函数、函数式接口、反射以及Java中的集合等。
28 0
|
3月前
|
存储 安全 Java
这些年背过的面试题——Java基础及面试题篇
本文是技术人面试系列Java基础及面试题篇,面试中关于Java基础及面试题都需要了解哪些内容?一文带你详细了解,欢迎收藏!
|
3月前
|
XML 存储 JSON
【IO面试题 六】、 除了Java自带的序列化之外,你还了解哪些序列化工具?
除了Java自带的序列化,常见的序列化工具还包括JSON(如jackson、gson、fastjson)、Protobuf、Thrift和Avro,各具特点,适用于不同的应用场景和性能需求。
|
3月前
|
Java
【Java基础面试三十七】、说一说Java的异常机制
这篇文章介绍了Java异常机制的三个主要方面:异常处理(使用try、catch、finally语句)、抛出异常(使用throw和throws关键字)、以及异常跟踪栈(异常传播和程序终止时的栈信息输出)。