<script>
        var imgs = document.getElementsByTagName('img');
        for (var i = 0, len = imgs.length; i < len; i++) {
             //一定要先将i的值作为imgs的一个属性保存起来，注意
            imgs[i].index = i;
            imgs[i].onmouseover = function(){
               // console.log(i);
                console.log(this.index);
}
}
</script>
加入HTML页面有8个IMG标签的话，我的理解是脚本先执行循环不是吗？循环次数也只有8次，   但是 为什么实际的执行结果却是  只要触发循环内的事件 就可以一直执行触发事件既定的语句并且能够准确的找到所触发标签的下标呢。这段代码到底是怎么个执行步骤和原理呢？

imgs.length; i < len？你这什么意思

<!-- 加入HTML页面有8个IMG标签的话，我的理解是脚本先执行循环不是吗？循环次数也只有8次 -->

这个时候给每个元素的作用域链上增加了index属性，和onmouseover事件

<!-- 但是 为什么实际的执行结果却是 只要触发循环内的事件 就可以一直执行触发事件既定的语句并且能够准确的找到所触发标签的下标呢。这段代码到底是怎么个执行步骤和原理呢？ -->

这个时候触发的事件是上面循环增加到作用域链的事件，标签的下标也就是index属性也是在循环中增加到作用域链上index的。

如果用console.dir(imgs[i]);查看指定元素的属性和方法，你会发现 index 属性是你设置的下标值，onmouseover 事件也已经被你赋值。

<script>
    //这样写试试,加载时的问题应该是
    window.onload=function(){
        var imgs = document.getElementsByTagName('img');
        for (var i = 0; i < imgs.length; i++) {
             //一定要先将i的值作为imgs的一个属性保存起来，注意
            imgs[i].index = i;
            imgs[i].onmouseover = function(){
               // console.log(i);
                console.log(this.index);
}
}
}
</script>

html 页面会按顺序执行 ，建议将script 代码写到body 下方，等body内标签元素加载完成 在执行JavaScript 代码，否则有可能保 ~undefine 之类的错误。