oninput、onblur和onchange的区别
oninput
用户在向input输入框里输入数据的时候,会触发oninput事件
<input type="text" placeholder="input输入事件" class="inp">
btn.onclick = function() {console.log('1')
}
一开始是这样的
注意:当我在输入框里面输入的时候,控制台会打印出 123
输入几次,就会触发几次事件,就会打印几次 123
总结:只要在输入框输入东西,就会触发input事件
onblur
onblur事件是专门对应输入框的,当输入框失焦的时候,会触发onblur事件
聚焦:当你的鼠标在文本输入框点击的时候,文本输入框内的小竖线会闪烁,这叫做文本输入框的聚焦
失焦:当你的鼠标在输入框以外的地方点击的时候,小竖线会消失,这叫做失焦
<input type="text" placeholder="blur失焦事件" class="Blur">
Blur.onclick = function() {console.log('123')
}
一开始是这样的:控制台没有输出
注意:当我输入框输入数字的时候,控制台并没有变化
但是,当输入框失焦的时候,注意控制台的变化
总结:只要输入框失焦了,就会触发blur失焦事件
onchange
onchange事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发
<input type="text" placeholder="change事件" class="Blur">
Blur.onclick = function() {console.log('change事件')
}
一开始是这样的:控制台没有输出
当我往输入框输入数据的时候,控制台没任何变化
但是,当我输入框失焦的时候,注意控制台的变化
总结:只有当输入框的值发生改变 并且 输入框失焦的 时候,才会触发onchange事件
区别:
input:只要输入框输入就会触发事件
blur:只要输入框失焦就会触发事件
change:输入框的值变化并且失焦才会触发事件
oninput、onblur和onchange的区别相关推荐
- 关于 onblur 和 onchange 的区别
** onblur() onblur的语义是在失去焦点时,也就是说其触发条件是当元素失去焦点时触发, onchange() onchange的语义时当改变时,其触发条件有两个:一个是元素的值改变了, ...
- input元素的oninput事件和onchange事件的使用和区别
1.input元素上绑定事件的三种方式: 第一种:直接在元素标签上添加oninput属性,属性值为处理事件函数的调用 html代码: <input type="text" i ...
- 【JavaScript】——input元素的oninput事件和onchange事件
1.oninput事件是在输入框中输入时就会触发,该事件在<input>或<textarea>元素的值发送改变时触发. 2.onchange事件是在输入框输入完内容后,输入框失 ...
- input元素的oninput事件和onchange事件
input元素的oninput事件和onchange事件 框架用多了,感觉原生的有点弱化了,不说了,是时候巩固一波了 ^ _ ^ 1.input元素上绑定事件的三种方式: 第一种:直接在元素标签上添加 ...
- JS中onpropertychange事件和onchange事件区别
2019独角兽企业重金招聘Python工程师标准>>> 当一个HTML元素的属性用js改变的时候,都能通过 onpropertychange来捕获.例如一个 <input na ...
- input 的 oninput onkeypress onkeydown onchange 事件的区别
事件执行顺序: <input type="text" id="foo" onkeydown="console.log('down')" ...
- 表单oninput和onchange事件区别
oninput事件是元素value发生变化是立刻触发,而onchange是元素发生变化并且失去焦点时才会触发. 转载于:https://www.cnblogs.com/ykli/p/9565601.h ...
- onblur和onchange
onblur onblur 事件会在对象失去焦点时发生. onblur 经常用于Javascript验证代码,一般用于表单输入框. 提示:onblur 相反事件为 onfocus 事件 . 案例: & ...
- 前端基础JS——input输入框的oninput事件和onchange事件
在开发过程中,input用的比较多的是change事件,忽略了还有input事件. onchange--input输入过程中不会触发,失去焦点时才会触发: 兼容性:所有浏览器都支持,可以用于& ...
最新文章
- python 错误之SyntaxError: Missing parentheses in call to 'print'
- 斐波那契数列性质【记住】
- IntelliJ IDEA WEB项目的部署配置
- 进入编辑模式、vim命令模式、vim实践
- 第五节 suid/ sgid /sbit /which /locate / find /stat / ln / uname -a
- 服务性服务–服务到服务的通话
- 前端学习(1865)vue之电商管理系统电商系统之实现表单的数据绑定
- google python的风格规范
- 程序以html形式发送邮件注意问题
- 视频理解新方向:时域语言定位 综述
- linux文件或目录权限修改后如何恢复(备份了权限就能恢复)
- mybatis-generator扩展教程系列 -- 自定义配置参数修改DAO,Mapper文件后缀
- CentOS7安装uwsgi遇到的坑解决方法
- Java 11 发布线路图:有哪些值得期待的新特性?
- 免费地图资源(持续更新)
- 景深与光圈与焦距关系
- 台式计算机电源线 规格,台式电脑电源线怎么接
- typescript学习之函数
- 牛X公司的开会方式,明天开始参照执行
- RK3399平台开发系列讲解(硬件波形解析篇)10.1、USB2.0相关硬件波形(实图)解析