input的onchange 和oninput事件

Posted 2020-09-29 HeroBo

一个小的功能，也体现了了这几天写程序过程中的遇到的一些常发事件，准备有时间研究一下jQuery和原生js,问题的出现：使用jQuery获取到的节点到底是属于什么，有些事件

居然不能用，就如我今天用到的事件 onchange 和oninput ，还有对于onclick 和click，

先总结一下这个小小的功能：输入框要输入money，那就只有两位小数，我们要确保输多位小数时，不让他提交，提交按钮变灰色，当小数点后是两位则回复按钮状态，

onchange事件，监听input 输入的值是否符合要求，不符合则改变按钮状态：代码如下：

bid.onchange=function(){
        var num = bid.value;
        var dot = num.split(‘.‘);
        if(dot[1]!=null){

            if(dot[1].length>2){
                var addbtn = document.getElementById("addbtn");
                addbtn.setAttribute("disabled",true);
                alert("请保留两位小数");
            }
        }
    }

oninput事件，随时监听input输入的值，小数点后的位数，当时两位时，按钮回复状态：代码如下：

bid.oninput=function(){
        var num = bid.value;
        var dot = num.split(‘.‘);
        if(dot[1]!=null){

            if(dot[1].length<=2){
                var addbtn = document.getElementById("addbtn");
                addbtn.removeAttribute("disabled");
            }
        }
    };

说一下两个事件的区别：onchange 当文本框失去焦点时，检查input里的值是否符合要求，执行函数

　　　　　　　　　　　oninput 实时监听文本框的值，不符合要求事件触发，（但是虽不符合要求，值却已经在文本框了）这就为什么两个事件得同时用

待续。。。jQuery和原生js 对事件的操作支持：

 

　　这篇文章的前部分很早就写完了，最近才明白了，不是jquery和js的问题，是DOM的问题，以前没意识到这个问题，最近搞清楚了（和别人讨论问题时，提到了）恍然大悟，犹如醍醐灌顶值功效。哈哈，感觉使用jquery瞬间轻松了好多，这种感觉是只有个我这种菜鸟才能感受的。

　　首先，jquery和DOM 他们各自的属性方法是不能混用的，简单说，jquery是方法，DOM是属性，

　　　　我们使用dom获取属性节点，使用jquery方法操作节点，和平共处。

　　然后，就涉及相互转换的问题，看了一些资料，表达一下自己最切实的理解。

　　　　使用$("**")获取节点，就是jquery对象，使用jquery的方法属性，

　　　　使用$("**")[index]这样，就变成了DOM对象，使用ＤＯＭ方法和属性。

　　　　使用$($("**")[index]),转换成jquery对象，使用jquery的方法。

　　三句切实理解jquery和ＤＯＭ的操作方式，希望以后在前端的道路上，勇往直前！

 

 

有什么问题，欢迎吐糟，共同进步！

<h2>现阶段目标：能用代码量解决的问题，就不是问题！</h2>