JavaScript事件监听引起的事件覆盖

       最近写了一个轮播图小案例，因为JS结构问题产生了一个小bug，虽然最后解决了但还是想了解一下这个bug是怎么产生的，即事件监听的嵌套引起的事件覆盖。

1.关于bug的产生与描述：

首先我自己重新写了一下这段代码

<div>
        <button>点击</button>
    </div>
    <script>
        var n = 0;
        var div = document.querySelector('div')
        var btns = document.querySelectorAll('button')
        div.addEventListener('mouseover',function() {
            btns[0].addEventListener('click',function() {
                console.log(n++);
            })
        })
    </script>

可以看到，我们将两个事件监听嵌套在了一起，然后运行这段代码后，用逻辑来描述应该是每点击一次按钮控制台输出n + 1的结果。

(这次输出是点击四次的效果)

 当我们第一次(即没有触发mouseover时)移入盒子时点击， 它输出是正确的输出，但是一但触发了mouseover(或者其它事件)时，则会使每次点击都会产生输出事件触发次数倍数的数字。

(这次输出是点击一次的效果)

2.bug的解决：

所以bug就产生了，这个bug与事件监听没有事件覆盖有关系(特费解)，当我们把事件监听换成传统事件时，这个bug就没有了。

<script>
        var n = 0;
        var div = document.querySelector('div')
        var btns = document.querySelectorAll('button')
        div.addEventListener('mouseover',function() {
            btns[0].onclick = function(){
                console.log(n++);
            }
        })
    </script>

即每次点击只会自加一次。有大佬知道这个bug具体原理吗，欢迎在评论区留言(救救孩子)~