input事件和change事件的区别

今天在监听<input>输入框的内容变化时监听的是change事件，本意是希望输入框内容一发生变化就执行事件监听方法，但是在运行时却发现我在输入框中输入了内容，但是监听事件并没有执行，改用input事件之后才达到了预期。于是，就查看资料了解了change事件和input事件的区别。

input事件和change事件的区别

input事件：输输入框内容发生改变时就会触发

change事件：输入框内容发生改变，并且输入框失去焦点时触发。例如向输入框中输入一长串的内容后按下enter键、点击其他内容等操作之后才会触发change事件。

示例

<template><div><div><p>测试input事件</p><input v-on:input="onInputEvent" /></div><div><p>测试change事件</p><input v-on:change="onChangeEvent" /></div></div>
</template><script>
export default {name: "Demo",methods: {onInputEvent() {console.log("====  input 事件触发了");},onChangeEvent() {console.log("====  change 事件触发了");},},
};
</script>

从打印结果可以看出同样是向输入框中输入8个数字，input事件执行了8次，而change事件只指向了一次。

input事件和change事件的区别相关推荐

onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案) 参考文章: (1)onchange监听inpu ...
input事件和change事件区别
每当元素的 value 改变,input 事件都会被触发. input事件在输入框输入的时候回实时响应并触发 change 事件仅当 value 被提交时触发,如按回车键,从一个 options 列表 ...
input输入框的input事件和change事件
input输入框的onchange事件,要在 input 失去焦点的时候才会触发: 在输入框内容变化的时候不会触发change,当鼠标在其他地方点一下才会触发: onchange 事件也可用于单选框与 ...
2016年11月30日 angularJS input=file 绑定change事件
angularJS 之前都没有听说过,刚进公司第一天领导让我自己在网上学习第二天开始帮忙做一点东西,遇到了第一个问题:angularJS 如何绑定file表单的change 上传图片,我不会用ang ...
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法
1. onchange事件监听input值变化的使用方法: <input id="test"></input>$("input").ch ...
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)...
转自:https://www.cnblogs.com/white0710/p/7338456.html 1. onchange事件监听input值变化的使用方法: <input id=" ...
element-ui组件中的input等的change事件中传递自定义参数
以select为例,如果select写在循环里,触发change事件时可能不只需要传递被选中项的值,还要传递index过去,来改变同一循环中的其他标签的状态. 下面这样写是无效的: @change=& ...
【jquery】jquery-icheck radio的点击事件、change事件、获取当前选中的值
前言使用ichick,获取当前选中,以及change事件的触发,或者说是点击事件参考:https://www.cnblogs.com/xp796/p/5508145.html // 方法名称:获取 ...
input type=file change事件只触发一次
javascript 中onchange事件: 当对象的值发生改变的时候才会触发; 即input中value值变化才会触发如要上传两次,清除文件输入值转载于:https://www.cnblogs ...

input事件和change事件的区别

input事件和change事件的区别

示例

input事件和change事件的区别相关推荐

最新文章

热门文章