使用addEventListener在函数体外绑定的函数，在函数体内无法取消绑定

Question

项目的需求是给五个元素先添加一个动画，在动画执行完成后再给五个元素添加另外一个动画。元素以数组的形式保存在了arr中，实际在执行的过程中发现section.removeEventListener("animationend",down.bind(this,arr,section),false)
这一句没有正常生效，在for循环执行完成后，会反复再次执行down(arr,section)这个方法。中间插入clear（）这个方法的执行结果。判断是在section这个元素上“animationend”执行完成后，同时绑定了down（）和clear（）两个方法的原因导致的。现在问题就是不理解为什么removerEventListener（）这个方法会不生效

// 给元素的父级元素添加监听animationend事件，避免元素结束动画时间不一致导致重复执行事件
        // 使用bind方法绑定执行环境且传递两个数组和父元素
        section.addEventListener("animationend",down.bind(this,arr,section),false)
        // var bb=down.bind(this,arr,section,bb)
        // 定义方法，在上升动画执行完毕后触发。
        function down(arr,section){
            // console.log(le)
            console.log(section)
            // 删除父级元素中绑定的动画结束后执行的方法
            section.removeEventListener("animationend",down.bind(this,arr,section),false)
            // var kk=down.bind(this,arr,section,bb)
                // var le=arr[i]
                // console.log(kk==bb)
                // 遍历数组，为元素绑定下降的动画
            console.log(arr[1].style.animationName)
                for(var j=0;j<arr.length;j++){
                    console.log(arr[j].style.animationName)
                    arr[j].style.animation="bb 1s"
                    console.log(arr[j].style.animationName)
                    arr[j].style.animationTimingFunction="cubic-bezier(0.25,0.5,0.75,1)"
                // le.style.animationFillMode="forwards"
                console.log(arr[j])
                }
            // 监听父级元素，在所有元素下降动画执行完毕后，执行清除方法，清除元素的动画
            section.addEventListener("animationend",clear.bind(this,arr),false)

Answer 1

我分享下我自己研究的结果吧。虽然animationend这个事件在父级绑定的，但不同的子元素都绑定了动画，这个事件依然会触发五次。不知道这算不算是一个无解的问题，最后我放弃这个思路了。