javascript - 无法在 Electron 的渲染器过程中使用事件监听器

Question

我正在尝试使用输入创建 Electron 应用程序，该值将用于通过win.setProgressBar()设置应用程序的进度栏

我试图使用ipc将消息从渲染器进程发送到主进程。我尝试使用上面定义的功能为输入添加模糊和单击事件监听器，但似乎未正确应用它们。

渲染过程:

const {ipcRenderer} = require("electron");

function setProgress(pgrss) {
    console.log("fromage"); // For debugging purposes
    ipcRenderer.send("sendMainMessage", {
        progress: pgrss
    });
};

document.getElementById("progress").addEventListener("click", setProgress(parseFloat(document.getElementById("progress").value)));

在HTML页面中输入:

<div class="pane">
    <input id="progress" type="number" value="0.5">
</div>

在HTML页面中加载渲染器JS:

<script>
  require("electron-photon")
  require('./renderer.js')
</script>

主进程ipc接收器:

const {app, BrowserWindow, ipcMain} = require('electron')

// ...

ipcMain.on("sendMainMessage", (event, properties) => {
  mainWindow.setProgressBar(properties.progress);
});

我将应用程序的进度栏设置为当事件发生时(通过渲染器进程和ipc)将其设置为我在输入字段中输入的值。
根据devtools的说法，用于事件监听器的呈现器进程的函数看起来在加载时运行一次，并且事件监听器未应用于输入字段。
这是控制台中显示的内容，与输入中是否键入内容无关:
https://i.imgur.com/poxXOY5.png。
并且在输入元素的“事件监听器”选项卡中，渲染器脚本未显示任何事件监听器。

Answer 1

我认为问题在于事件监听器会在DOM完全加载之前尝试附加，导致它不附加任何内容。您可以将jquery加载到您的项目中，并使用其默认的ready函数来确保DOM存在，然后再尝试附加监听器或自己编写一些内容。有关更多说明，请参见:How to wait until an element exists?。