input输入框的事件监听

主要涉及到的事件有：change， input，propertychange

针对IE浏览器（IE11测试）：

change事件：
输入框内容变化且失去焦点，触发change事件。

    <input type="text" value="4545">

    var input = document.querySelector('input')input.addEventListener('change', function(params) {console.log('params', params)})

值得一提的是从IE9开始，IE已经摒弃了attachEvent用来监听事件的方法。
通过js代码修改的input输入框的value值不会触发change事件。

    input.setAttribute('value', 1212)

propertychange事件
输入框内容变化，实时触发propertychange事件
在IE9之前使用propertychange事件名，但是IE9以后便统一使用input事件名来实时监听，所以这里我们也不做过多研究。

针对除IE外的其他浏览器（chrome:68.0.3440.106测试）

change事件
跟IE11浏览器的测试结果一样，都是输入框内容变化且失去焦点的时候会触发change事件，通过js代码来改变输入框的value值不会触发change事件。
input事件

   input.addEventListener('input', function(params) {console.log('params', params)})

但是如果是通过js代码来改变input输入框的value值也不会触发input事件。

如果想要对js代码改变输入框的值进行监听，可以使用MutationObserver

 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;var input = document.querySelector('input');var observer = new MutationObserver(function(mutations) {// console.log('mutations',mutations)mutations.forEach(function(record) {if(record.attributeName == "value"){// console.log('record.target',record.target)console.log('record.oldValue',record.oldValue)}});});observer.observe(input, {attributes: true,childList: true,characterData: true,attributeOldValue :true,attributeFilter:["value"]//只监听value属性,提高性能});input.setAttribute('value', 1212)input.setAttribute('value', 1212)

输出结果为：

以上方法对IE11和chrome68.0.3440.106效果相同。可以看到的是，只要设置了input的value值，不管该值是不是和原值相同，即是不是发生了变化，都可以通过MutationObserver的observe方法监听到，并调用回调函数进行响应处理。
参考：https://www.cnblogs.com/rubylouvre/archive/2012/05/28/2520721.html

input输入框的事件监听相关推荐

微信小程序批量获取input的输入值，监听输入框，数据同步
微信小程序批量获取input的输入值,监听输入框,数据同步在使用小程序时,跟vue的数据绑定不一样,没有v-model这个属性了,官网也只是给了一些事件监听. 但是我们如果有多个表单时,需要写多个事 ...
[JS-DOM]事件监听机制
事件监听机制概念:某些组件被执行了某些操作后,触发某些代码的指行.*事件: 某些操作.如:单击,双击,键盘按下了,鼠标移动了.*事件源:组件.如:按钮,文本输入框...*监听器:代码.*注册监听:将 ...
二、Vue基础语法学习笔记——事件监听v-on、条件判断（v-if、v-else-if、v-else、v-show）、循环遍历（v-for遍历数组对象，key属性、检测数组更新）、图书案例、双向绑定
四.事件监听在前端开发中,我们需要经常和用于交互. 这个时候,我们就必须监听用户发生的时间,比如点击.拖拽.键盘事件等等在Vue中如何监听事件呢?使用v-on指令 v-on介绍作用:绑定事件监听 ...
事件监听watch框架vue2.x与3.x都适用
前言: 目前正在学习vue或者对vue部分使用不太熟悉的可以跟着的我文章,打开编辑器,安装vue-cli一步步的练习,不会安装vue-cli脚手架的小伙伴可以先看这篇文章https://blog.cs ...
java中事件监听_Java中的事件监听机制
鼠标事件监听机制的三个方面: 1.事件源对象: 事件源对象就是能够产生动作的对象.在Java语言中所有的容器组件和元素组件都是事件监听中的事件源对象.Java中根据事件的动作来区分不同的事件源对象,动 ...
layui监听当前页_事件监听 · layui使用手册 · 看云
# 事件监听语法:form.on('event(过滤器值)', callback); form模块在 layui 事件机制中注册了专属事件,所以当你使用layui.onevent()自定义模块事件时 ...
Java中事件监听机制
Java中事件监听机制一.事件监听机制的定义要想了解Java中的事件监听机制,首先就要去了解一下在Java中事件是怎样去定义的呢!在使用Java编写好一个界面后,我们就会对界面进行一些操作,比如, ...
Jquery系列:checkbox 获取值、选中、设置值、事件监听等操作
<div id="divId" class="divTable"><div class="tableBody">&l ...
vue中的v-on事件监听机制
监听dom事件使用v-on指令: v-on:事件类型="一个函数" 这个事件类型可以自定义简写: @事件类型="一个函数"⭐ 1.作用:绑定事件监听,表达式可 ...

input输入框的事件监听

input输入框的事件监听相关推荐

最新文章

热门文章