Javascript transitionend事件的重复执行

我想理解为什么下面的代码以指数形式复制transitionend的返回

这对我来说没有任何意义，因为他们应该有相同的行为，应该只执行一次

下面对预期的行为进行了注释

（函数（）{
变量动画={
开始：函数（）{
log（'animations has start'）；
this.transition.run（）；
},
过渡：{
持续时间：500，
运行：函数（）{
log（'transitions is running'）；
const el=document.querySelector（'.box'）；
el.classList.toggle（'fadein'）；
//不要像预期的那样复制！！！良好的行为！！！
/*el.ontransitionend=函数（）{
log（'transitionend triggered！'）；
};*/
//每次点击都会重复！！！不良行为！！！
el.addEventListener（'transitionend'，function（）{
console.log（'transitionend triggered'）；
}，假）；
}
}
};
const bt=document.querySelector（'button'）；
bt.addEventListener（'单击'，（）=>{
动画。开始（）；
})
})();
.box{
宽度：100%；
高度：100vh；
背景：绿色；
不透明度：0；
过渡：不透明度。5s线性；
}
.box.fadein{
不透明度：1；
}
开始转换
```
来自：

要设置事件处理程序代码，只需将其分配给相应的OneEvent属性即可一个元素中的每个事件只能分配一个事件处理程序。如果需要，可以通过为同一属性分配另一个函数来替换该处理程序

在元素上设置事件处理程序最灵活的方法是使用EventTarget.addEventListener方法。这种方法允许将多个侦听器分配给一个元素，如果需要，可以删除侦听器（使用EventTarget.removeEventListener）

这是什么意思？

使用
el.ontransitionend
始终替换“旧”事件处理程序，因为只能有一个属性处理程序。

但是如果你总是添加一个新的处理程序，那么旧的处理程序将保持不变，只要你不显式地删除它