a标签下的img 为啥鼠标移入移出的事件同时触发

a标签下的img 为什么鼠标移入移出的事件同时触发啊
部分代码如下：
<script type="text/javascript">

        window.onload = function (){

            var mDiv = document.getElementById('one'),
            mA = mDiv.getElementsByTagName('a');
            for (var i = 0; i < mA.length; i++) {
                mA[i].onmouseover = function(){
                    console.log('1')                }

            };
            for (var i = 0; i < mA.length; i++) {
                mA[i].onmouseout = function(){
                    console.log('2')
                }

            };

        }

    </script>

问题是：鼠标移入每一个a标签时，会触发一次鼠标移入，一次鼠标移出，再一次鼠标移入，总共出发了三次事件，这是为什么啊！！

------解决思路----------------------
因为因为鼠标移入a标签下的img时也会触发a标签的 onmouseout 事件

你改用 jquery 的 mouseenter() 和 mouseleave() 就好了

------解决思路----------------------
http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseenter_mouseover

另外，你可以考虑试试 这个事件 。

			for (var i = 0; i < mA.length; i++) {

				mA[i].onmouseenter = function(e){

						console.log('1') ;

				}


			};

			for (var i = 0; i < mA.length; i++) {

				mA[i].onmouseleave = function(e){

						console.log('2');

				}


			};