onchange里this的指向

<!DOCTYPE html>
<html>
<head lang="en">
        <meta charset="UTF-8">
        <title>onchange()</title>
        <style type="text/css">
            #div{
                width:300px;
                height:300px;
                border:2px solid gray;
                margin:100px  0  0 200px;
            }
        </style>
        <script type="text/javascript">
           //补充代码
           window.onload = function(){
               var sle = document.getElementById('color'),
               div = document.getElementById('div');
               sle.onchange = function(event){
                   console.log(this.innerHTML);
                   console.log(this.value);
               }
           }
        </script>
    </head>
    <body>
<div>
    <span>请选择您喜欢的颜色:</span>
    <select id="color">
        <option value="0">请选择</option>
        <option value="yellow">黄色</option>
        <option value="orange">橘色</option>
        <option value="pink">粉色</option>
        <option value="purple">紫色</option>
    </select>
</div>
        <div id="div">我是div</div>
</body>
</html>

想问下老师，给select捆绑onchange事件后，在函数中输出this.innerHTML输出了整个select的内容，而输出this.value时则是输出了选中项的value值

所以，捆绑的应该是select，但为什么输出value时输出了选中项的value呢？

且听风吟720 2019-07-23

源自：JS DOM事件 3-12 编程练习