使用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这个事件在父级绑定的，但不同的子元素都绑定了动画，这个事件依然会触发五次。不知道这算不算是一个无解的问题，最后我放弃这个思路了。