Javascript 获取触发AOS自定义事件的元素

我有几个元素，它们在使用最新的滚动动画库（）进行查看（进入视口）时触发自定义事件

HTML:

CSS:

此简单脚本用于在

foo

元素进入视口时将其绘制为红色。除了Edge和IE之外，它在任何地方都可以正常工作。据我所知，

e.detail

不返回DOM元素，但我不知道如何处理某个对象

有什么想法吗

<div class="foo" data-aos data-aos-id="inview">
  Foo 1
</div>
<div class="foo" data-aos data-aos-id="inview">
  Foo 2
</div>

// Init AOS
AOS.init();

// Toggle red color    
document.addEventListener('aos:in:inview', function(e) {
   e.detail.classList.add('text-red');
});

.text-red {
  color: red !important;
}