input , change ,blur 事件的区别,以及在vue和react中的表现

原生事件介绍

onInput Event

当一个 , , 或 元素的 value 被修改时,会触发 input 事件

onChange Event

当用户更改 、 和 元素的值时,change 事件在这些元素上触发。和 input 事件不同的是,并不是每次元素的 value 改变时都会触发 change 事件。

基于表单元素的类型和用户对元素的操作的不同,change 事件触发的时机也不同:

  • 当 元素被选中或取消选中时(通过点击或使用键盘);
  • 当 元素被选中时(但不是取消选中时);
  • 当用户显式提交改变时(例如:通过鼠标点击了 中的一个下拉选项,通过 元素选择了一个日期,通过 元素上传了一个文件等);
  • 当标签的值被修改并且失去焦点后,但未提交时(例如:对、 text、search、url、tel、email 或 password 类型的 元素进行编辑后)。
onBlur Event

blur与change事件在绝大部分的情况下表现都非常相似,输入结束后,离开输入框,会先后触发change与blur,唯有两点例外。

  1. 没有进行任何输入时,不会触发change
    在这种情况下,输入框并不会触发change事件,但一定会触发blur事件。在判断表单的修改状态时,这种差异会非常有用,通过change事件能轻易地找到哪些字段发生了变更以及其值的变更轨迹。

  2. 输入后值并没有发生变更
    这种情况是指,在没有失焦的情况下,在输入框内进行返回的删除与输入操作,但最终的值与原值一样,这种情况下,keydown、input、keyup、blur都会触发,但change依旧不会触发。

React 中

onInput

onInput:一个 Event 处理函数。在用户更改值时立即触发。由于历史原因,在 React 中习惯于使用 onChange,工作方式类似。

onChange

onChange:一个 Event 处理函数。如果这是 受控输入框,则必须提供。在用户更改输入框的值时立即触发(例如,每次按键时触发)。行为类似于浏览器的 input 事件。

onBlur

onBlur:一个 FocusEvent 事件处理函数。当元素失去焦点时触发。与内置的浏览器 blur 不同,在 React 中,onBlur 事件会冒泡。

Vue中(类似原生事件)

  <input type="text" v-model="inputValue" @change="handleChange" />
onInput

v-model 绑定事件onInput

剖析实现:

//CustomInput
<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"/>
</template><script setup lang=ts>
const props=defineProps(['modelValue'])
const emit=defineEmits(['update:modelValue'])const {modelValue}=toRefs(props)
</script>
...

使用

<CustomInput:model-value="searchText"@update:model-value="newValue => searchText = newValue"
/>等价于<CustomInput v-model="searchText" />
onChange

@change 事件会在表单元素的值发生变化并失去焦点(通常是用户输入后按下回车键或点击其他地方)时触发。这与 @input 事件不同,后者会在每次输入时都触发。

onblur

当元素失去焦点时触发

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

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

相关文章

SQL 算术运算符

SQL Server中的存储过程 什么是存储过程&#xff1f; 存储过程是一段预先编写好的 SQL 代码&#xff0c;可以保存在数据库中以供反复使用。它允许将一系列 SQL 语句组合成一个逻辑单元&#xff0c;并为其分配一个名称&#xff0c;以便在需要时调用执行。存储过程可以接受参数…

Qt线程池

创建一个类继承自QRunnable&#xff1a; class Thread02 : public QRunnable 重写run方法&#xff1a; void run() override; 在main函数里面加入线程池&#xff1a; Thread02 *th new Thread02();QThreadPool::globalInstance()->start(th); #include <QtCore/QC…

巧妙的使用WPF中的资源

其实&#xff0c;在wpf中&#xff0c;最核心的就是xaml&#xff0c;因为只有xaml&#xff0c;才能体现出用的是wpf&#xff0c;而不是普通的cs文件&#xff0c;cs文件在winform中等等程序都可以使用的&#xff0c;唯独xaml才是wpf中最重要的&#xff0c;最精华的东西&#xff0…

ARM按键中断

do_irq.c 判断中断号 #include "key_it.h" extern void printf(const char *fmt, ...); unsigned int i 0; void do_irq(void) {// 获取中断号&#xff0c;根据中断号的不同进行不同的中断处理int irqno;irqno GICC->IAR & 0x3ff;switch (irqno){case 99:…

gitlab ci pages

参考文章 gitlab pages是什么 一个可以利用gitlab的域名和项目部署自己静态网站的机制 开启 到gitlab的如下页面 通过gitlab.ci部署项目的静态网站 # build ruby 1/3: # stage: build # script: # - echo "ruby1"# build ruby 2/3: # stage: build …

jupyter notebook介绍、安装和使用

简介 Jupyter Notebook是基于网页的用于交互计算的应用程序。其可被应用于全过程计算&#xff1a;开发、文档编写、运行代码和展示结果。——Jupyter Notebook官方介绍 简而言之&#xff0c;Jupyter Notebook是以网页的形式打开&#xff0c;可以在网页页面中直接编写代码和运…

vue3 + ts 判断各种数据类型,首字母转大写,下划转驼峰,的方法集合

vue3 ts 判断各种数据类型&#xff0c;首字母转大写&#xff0c;下划转驼峰&#xff0c;的方法集合(记录ing…) 1. 直接上代码 1. 在utils文件夹下新建 index.ts// index.ts/*** description: 判断是否为某个类型*/ export function is(val: unknown, type: string) {return …

SpringCache入门

1. SpringCache概述 Spring Cache 是 Spring 框架提供的一个用于提高应用性能的缓存抽象。它不是一个具体的缓存实现&#xff0c;而是提供了一组一致的编程模型来整合各种缓存机制&#xff0c;比如 EhCache、Caffeine、Redis 等。Spring Cache 使得开发者可以通过简单的注解来…

Spring Boot+Mybatis设置sql日志打印

在全局配置文件添加以下内容&#xff1a;logging.level.com.demo.mapperdebug&#xff0c;com.demo.mapper&#xff1a;src下的mapper路径&#xff0c;debug&#xff1a;设置日志打印级别为debug&#xff0c;亦可设置为&#xff1a;ERROR、WARN、INFO application.properties …

10-流媒体-RTMP编译

将h264推流给服务器&#xff0c;就完成了采集端的推流工作。一般在嵌入式系统常用的rtmp推流方案是rtmpdump。使用rtmp库涉及到一些编译过程&#xff0c;下面我们一点点描述。 关于rtmp的使用涉及到3个开源库的编译&#xff08;openssl, zlib, rtmpdump&#xff09;&#xff0c…

【C++】optional的使用(一)

这篇文章介绍下C17引入的std::optional 为什么要有 optional 一般来说&#xff0c;如果想要一个函数返回“多个”值&#xff0c;C程序员倾向于使用结构体/类完成这个操作。即定义一个通用的结构体&#xff0c;在函数内部完成装填&#xff0c;然后返回一个实例化的结构体。 #…

fckeditor编辑器改造示例:增加PRE,CODE控件

查看专栏目录 Network 灰鸽宝典专栏主要关注服务器的配置&#xff0c;前后端开发环境的配置&#xff0c;编辑器的配置&#xff0c;网络服务的配置&#xff0c;网络命令的应用与配置&#xff0c;windows常见问题的解决等。 文章目录 修改方法&#xff1a;1&#xff09;修改fckco…

Python项目——贪吃蛇

1、原理 整个界面由一个二维数组组成。游戏开始时&#xff0c;会随机生成一个苹果&#xff08;红点&#xff09;和一条蛇&#xff08;黄点&#xff09;。蛇会在二维数组中移动&#xff0c;当蛇碰到苹果时&#xff0c;苹果被吃&#xff0c;蛇的长度加一&#xff08;红点变黄点&…

性能测试

什么是性能测试&#xff1f;性能测试定义性能测试和功能测试区别性能测试常见术语及指标1&#xff1a;用户数3&#xff1a;响应时间4&#xff1a;事务5&#xff1a;每秒事务通过数6&#xff1a;用户点击率7&#xff1a;吞吐量8&#xff1a;吞吐率9&#xff1a;思考时间10&#…

C++函数返回值类型不确定处理办法-函数重载

如果有一个函数的返回值不确定是int还是float&#xff0c;比如&#xff1a; int func(const int& input) {return(input 1);} float func(const int& input) {return(input 1);} //重定义报错float a func(1); 这样定义肯定是会报错的。因为同名函数的重载只能用…

基于ssm的简单学校课程管理系统的设计与实现(源码+调试)

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。今天给大家介绍一篇基于ssm的简单学校课程管…

【Python测试开发】文件上传操作

先写一个上传页面 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>文件上传</title><link href"http://dcn.bootcss/bootstrap/3.3.0/css/bootstrap.min.css" rel"styleshee…

探索Nginx的奥秘--从代理到负载均衡的艺术实践

文章目录 &#x1f33a;Nginx的引入&#x1f33a;&#x1f33a;深刻理解正向代理与反向代理&#x1f33a;&#x1f339;Reverse proxy&#x1f339;&#x1f339;正向代理与反向代理的区别&#x1f339;&#x1f339;反向代理为什么叫反向代理&#x1f339;&#x1f339;负载均…

C#教程(三):字符串的各种用法

在C#中&#xff0c;字符串&#xff08;string 类型&#xff09;是一种常用的数据类型&#xff0c;用于存储和操作文本数据。以下是一些C#中字符串的常见用法 1、输出任意的字符串长度 代码 #region 输出任意的字符串长度 Console.WriteLine("请输入你心中想到的名字&…

Activiti工作流框架学习笔记(一)之通用数据表详细介绍

文/朱季谦 Activiti工作流引擎自带了一套数据库表&#xff0c;这里面有一个需要注意的地方&#xff1a; 低于5.6.4的MySQL版本不支持时间戳或毫秒级的日期。更糟糕的是&#xff0c;某些版本在尝试创建此类列时将引发异常&#xff0c;而其他版本则不会。执行自动创建/升级时&a…