Question

我正在尝试使用自定义事件触发我网站上脚本中的事件侦听器，但是似乎没有任何事情发生。应该告诉画布在组件安装后渲染音频波形。

在我的 App.js componentDidMount（）中：

let waveform = document.getElementById("audio-spectrum");

// Loads script waveform.js
const script = document.createElement("script");
script.src = '../waveform.js';
script.async = true;
App.appendChild(script);

let newWaveform = new Event("render");
waveform.dispatchEvent(newWaveform);

在 waveform.js中：

let waveform = document.getElementById('audio-spectrum');

waveform.addEventListener("render", function(event) {
    event.preventDefault();
    console.log("Something should happen");
    renderWaveform();
}, false);

我想知道是否有相同的元素触发并捕获响应是我问题的根源，但是我在音频播放中也做同样的事情，并且效果很好。

谢谢。

更新：

问题不在于事件/事件侦听器，而是事件触发时附加脚本。这是我基于诺言的解决方案：

在我的 App.js中：

renderWave = () => {
    let waveform = document.getElementById('audio-spectrum');
    let renderEvent = new Event('render');
    waveform.dispatchEvent(renderEvent);
}

mountAudioScript = () => {

    let mediaHandler = document.getElementById("media-handler");
    const script = document.createElement("script");

    mediaHandler.appendChild(script);

    script.src = '../waveform.js';

    return new Promise(res => {
        script.onload = res
    })
}

componentDidMount() {

    this.mountAudioScript().then(() => {
        if(this.props.mediaUrl) {
            this.renderWave();
        } else {
            // promptUpload()
        }
    });

Answer 1

更改为let newWaveform = new CustomEvent("render")。在这里https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent

了解更多

无法使用自定义事件在脚本中触发事件侦听器

1 个答案: