页面事件

在 Electron 中，页面事件主要涉及到的是渲染进程（Render Process）中的事件处理。这些事件通常是在 web 页面或预加载脚本中监听的，可以用来响应用户交互、页面加载状态变化等。

以下是一些常见的页面事件：

DOMContentLoaded: 当文档已完全加载并解析完成，但不包括样式表、图片和iframe的加载时触发。
javascript
```
document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM 全部加载完成');
});
```
load: 当整个页面（包括所有依赖资源如样式表、图片等）都加载完成时触发。
javascript
```
window.addEventListener('load', function() {
  console.log('页面全部加载完成');
});
```
beforeunload/unload: 分别在页面即将卸载和已经卸载时触发。beforeunload 通常用于询问用户是否保存数据。
javascript
```
window.addEventListener('beforeunload', function(e) {
  return '您确定要离开吗？';
});
```

resize: 当窗口大小改变时触发。

javascript

window.addEventListener('resize', function() {
  console.log('窗口大小改变了');
});

scroll: 当页面滚动时触发。

javascript

window.addEventListener('scroll', function() {
  console.log('页面被滚动了');
});

contextmenu: 当用户尝试打开上下文菜单（通常是右击）时触发。

javascript

document.addEventListener('contextmenu', function(e) {
  e.preventDefault(); // 阻止默认的上下文菜单显示
  // 自定义上下文菜单逻辑
});

click: 当用户点击页面元素时触发。

javascript

document.getElementById('myButton').addEventListener('click', function() {
  console.log('按钮被点击了');
});

keydown/keyup: 分别在按键按下和释放时触发。

javascript

window.addEventListener('keydown', function(e) {
  console.log('键被按下了');
});
window.addEventListener('keyup', function(e) {
  console.log('键被释放了');
});

在 Electron 中，你还可以使用 IPC (Inter-Process Communication) 在主进程和渲染进程中传递消息，这可以通过 ipcRenderer 和 ipcMain 模块实现。例如，在渲染进程中发送一个事件：

javascript

const { ipcRenderer } = require('electron');
ipcRenderer.send('my-event', 'Hello from renderer process!');

然后在主进程中接收这个事件：

javascript

const { ipcMain } = require('electron');
ipcMain.on('my-event', (event, arg) => {
  console.log(arg); // 打印 "Hello from renderer process!"
});

以上就是 Electron 中一些常见的页面事件和 IPC 通信的基本用法。

页面事件 ​

页面事件