更改元素永远不会触发 addEventListener答案

【问题标题】：Changing the element never triggers addEventListener更改元素永远不会触发 addEventListener
【发布时间】：2020-06-20 19:14:58
【问题描述】：

我定期从设备接收测量值 _date 和 _time。当测量值到达时，我使用以下方法更新元素的innerHTML：

document.getElementById("t_001").innerHTML = `${_date}, ${_time}`;

ID 为 t_001 的元素正在改变它的值。现在我想在inner.HTML 更新时为文本创建一个很好的淡入淡出动画（使用不透明度）。

为了做到这一点，我想通过函数animation() 来操作元素的 CSS，如下所示：

let x = document.getElementById("t_001");

x.addEventListener("change", animation());

function animation(){
    // CSS Changes will take place here but this is never triggered...
    console.log(x);
}

但是函数永远不会触发……怎么会？

【问题讨论】：

innerHTML 没有 change 事件，仅适用于 value 的表单元素，例如 input、textarea。您需要的是MutationObserver。除此之外，您的方法值得怀疑。代替侦听器，使更改 innerHTML 的代码应用一个 CSS 类，从而生成您需要的动画。
那么我可以在这里做什么？我可能还必须更改第一段代码......
你可以关注这篇文章。 stackoverflow.com/questions/50683026/…。希望它会有所帮助。

标签： javascript

【解决方案1】：

正如其他人指出的那样，change 不会在您的元素的 HTML 更改时触发。但是，由于动画代码需要在不同的 JS 文件中，并且两个文件都可以访问 t_001 元素，因此您应该能够在收到新数据时从第一个文件触发自定义事件并在第二个。

文件 1

let x = document.getElementById("t_001");
let e = new Event('customEvent');

x.innerHTML = `${_date}, ${_time}`;
x.dispatchEvent(e);

文件 2

let x = document.getElementById("t_001");

x.addEventListener("customEvent", animation());

function animation() {
    console.log(x);
}

【讨论】：