Javascript 为什么'；在我的代码中，onanimationend可以工作，但addEventListener（“animationend”）可以吗？

我试图在元素的淡入淡出动画结束后删除该元素。将侦听器添加到

animationend

事件可以正常工作，但将处理程序分配给

.onanimationend

则不行-动画结束时不会触发该函数。为什么-上的

处理程序不能工作

我在FF48上运行代码，但问题也发生在Chrome71上


const post=document.querySelector（'.post'）；
const hideButton=post.children[0]；
//单击“隐藏”按钮后，运行淡入淡出动画。
hideButton.onclick=函数（）{
post.style.animationPlayState=“running”；
};
//此函数运行
post.addEventListener（“animationend”，function（））{
log（'animationend listener running'）；
//这个。删除（）；
});
//此函数不运行
post.onanimationend=函数（）{
log（'onanimationend处理程序正在运行'）；
//这个。删除（）；
};
@关键帧隐藏{
0% {
不透明度：1；
身高：100%；
利润率：10px0；
填充：15px；
}
75% {
不透明度：0；
身高：100%；
利润率：10px0；
填充：15px；
}
100% {
不透明度：0；
高度：0px；
边际：0px；
填充：0px；
}
}
.邮政{
背景色：#80ff00；
利润率：10px0；
填充：15px；
动画名称：隐藏；
动画持续时间：2秒；
动画填充模式：正向；
动画播放状态：暂停；
}

邮递
隐藏
检查您的浏览器版本并与

Firefox v48.0.0–36分钟前的Java Broker

您的浏览器与
animationend
不兼容，这是因为Chrome仍然不兼容，而FF 45仍然不支持处理程序。

我不知道Firefox 45（顺便说一句，你应该更新），但Chrome确实支持（
窗口
），这解释了为什么通过
EventTarget.addEventListener
附加的处理程序会捕获它


window.onanimationend=e=>{
//stacksnippet的控制台也有CSS动画。。。
如果（例如，animationName==='roundify'）
log（{//记录完整事件将终止页面
目标:e.target,，
类型：e型，
animationName:e.animationName
});
}
#动画{
宽度：100px；
高度：100px；
背景：#333；
动画：roundify2s向前；
}
@关键帧圆化{
100%{边界半径：50%；}
}
当然可以。我可以在Chrome71上重现这个问题。该元件看起来在FF 56上被正确拆除。听起来像是浏览器问题，而不是代码问题。是的，事实上这是浏览器问题。我编辑了我的答案。对不起，我不够清楚。我不想同时运行两个事件处理程序。我只是举了一个例子，一个函数有效，另一个函数无效。出于比较目的，onanimationend在我的代码中不起作用。即使我只是在控制台上记录一些东西。但是如果我改用addEventListener，它可以正常工作。您使用哪种浏览器？Firefox v48.0.0我可以在检查DOM属性时看到该属性，并且根据MDN提供了完全支持：