原生JS实时监听input框输入值的方法对比

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        请输入字符：<input type="text" id='d0'/>
        <hr />
        你是输入的字符为: <div id='d1'></div>
        
        <script>
            var input = document.getElementById('d0')
            
            var div = document.getElementById('d1');
            input.oninput = function(){
                div.innerHTML = input.value;
            }
 
        </script>
    </body>
</html>

<input id="density" type="range"  oninput="densityInput(event)" onpropertychange="OnPropChanged(event)">

//js

 function OnInput (event) {
    console.log(event.target.value);
  }
  // Internet Explorer 
  function OnPropChanged (event) {
      if (event.propertyName.toLowerCase () == "value") {
          console.log(event.srcElement.value);
      }
  }