解决 js addEventListener重复监听

问题：在使用addEventListener时会遇到监听的方法执行多次，是因为addEventListener重复添加事件监听时，不能替换之前的监听，导致有多个监听同时存在

解决：

    关键点，创建一个公共的全局变量用于控制重复事件的发生

    例子：

<script>
    var delFunc = null;//定义全局变量
    function test(){
        //使用for循环模拟多次添加监听场景
        for(var i = 0; i < 10; i++){
            //此处为关键点：如果这个全局变量不为空，说明当前已经绑定了一个监听，所以需要移除
            if(delFunc != null){
                document.getElementById("testBut").removeEventListener("click", delFunc);
            }
            
            //此处给该公共参数重新赋值方法
            delFunc = function () {
                console.log('监听执行方法');
            };

            //添加监听，此时添加监听不会出现重复监听的情况
            document.getElementById("testBut").addEventListener("click", delFunc);
        }
    }
</script>