关于onpropertychange与oninput的兼容问题

2022-12-19 07:48:49

关于onpropertychange与oninput的用法，网上一大堆，但还是有不兼容的时候，比如说，我想计下，一个input的值改变了多少次，如果写成兼容写法就为

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>onpropertychange与oninput事件</title>

    <script type="text/javascript">

    window.onload = function(){

        oTxt1 = document.getElementById('input1');

        oTxt2 = document.getElementById('input2');

        oBtn = document.getElementById('btn');

        var i=0;

        oTxt1.oninput = oTxt1.onpropertychange = function(){

            console.log(arguments.length)

            for(var j = 0; j< arguments.length; j++){

                console.log(arguments[j])

            }

            i+=1

            oTxt2.value = i

        }

        oBtn.onclick = function(event){

            var oEvent = window.event || event;

            oTxt1.setAttribute('good','hello')

        }

    }

    </script>

</head>

<body>

    <input type="text" id="input1" placeholder='请输入……'/>

    <input type="text" id="input2" placeholder='请输入……'/>

    <button value="changeProperty" id="btn">改变属性</button>

</body>

</html>