Introduction to events in Electron.js

▶

Just like in JavaScript, events are notifications that are executed at some point in the application's lifecycle. In this case, we are talking about events that are specific to the application and not events triggered by the user. In Electron, we have many types of events that we can use when closing the window, loading the web page, stopping the page load, and many others; it is important to note that all these events occur in the main process since this is where the different web pages are loaded.

Additionally, events are very useful with keyboard shortcuts to customize our app.

We have two types of events in Electron:

1. Events that occur at the application level:
   1. https://www.electronjs.org/es/docs/latest/api/app
2. Events that occur at the web page level:
   1. https://www.electronjs.org/es/docs/latest/api/web-contents

In this guide, I explain how they work, what types exist, and how I use them in real projects, all from my experience teaching and developing with Electron.

What are Events in Electron.js and why are they so important

Electron is, internally, a mix between Node.js and Chromium. That means that:

• The main process controls the entire application: windows, menu, lifecycle.
• The renderer process controls each web page.

And both are constantly sending signals (events) that you can listen to.

For example, every time a window finishes loading, every time you navigate to another URL, when the application is ready, when a frame changes… all of that is an event.

Personally, when I explain this in class, I always compare Electron events to “sensors”: if you know how to listen to them, you can react to everything.

Types of Events in Electron: Main Process vs. Web Content

Events of the app module: Application Lifecycle

The app module is the heart of the main process. This is where you listen for events like:

• ready → when Electron has finished starting up.
• will-finish-launching (macOS) → when basic initialization is complete.
• window-all-closed → when all windows have been closed.
• before-quit, will-quit, quit → complete exit cycle.
• Special macOS events like open-file, open-url, activate.

A typical example I use in my courses is controlling when to close the app:

const { app } = require('electron')
app.on('window-all-closed', () => {
 app.quit()
})

Although this is the simplest version, on macOS many apps keep the application alive without visible windows. That's why understanding these nuances is key.

Events of webContents: Loading, Navigation, and Window State

webContents is an EventEmitter. It renders and controls the web content within a BrowserWindow. It is accessed like this:

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ width: 800, height: 1500 })
win.loadURL('https://github.com')
const contents = win.webContents
console.log(contents)

Among its most important events are:

Loading Events

• did-finish-load → navigation is completely ready.
• dom-ready → the main document has finished loading.
• did-start-loading / did-stop-loading → visual loading status.
• did-fail-load / did-fail-provisional-load → errors during loading.

Essential Events with Electron

Events to Start the App (ready, activate)

app.whenReady() is the modern way to wait for the correct state:
app.whenReady().then(() => {
 createWindow()
})

Anything that depends on the DOM, menu, windows, or modules like net must go after this point.

On macOS, activate is key to restoring hidden windows:

app.on('activate', () => {
 if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

Events When Closing the Application (before-quit, window-all-closed)

When I write books, I usually give this example to prevent accidental closures:

app.on('before-quit', (event) => {
  console.log('The app is about to close') 
})

Used to save configurations before closing.

Window Loading Events (dom-ready, did-finish-load)

These are essential when I need to manipulate the DOM or inject scripts:

win.webContents.on('dom-ready', () => { console.log('DOM ready') })

Events for when the DOM is ready

How to Use Menu Events to Add Extra Features

When I talk about menus in my courses, I always say they are “the developer's secret dashboard.”
An Electron menu can trigger functions through events, for example:

const { Menu } = require('electron')
const template = [
 {
   label: 'Options',
   submenu: [
     {
       label: 'Reload',
       click: (menuItem, browserWindow) => {
         browserWindow.webContents.reload()
       }
     }
   ]
 }
]
Menu.setApplicationMenu(Menu.buildFromTemplate(template))

In my projects, I use this pattern a lot because it allows adding extra functions without modifying the app's UI.

Practical Examples: Listening to and Handling Events Step by Step

Detecting Online/Offline Connection

From the renderer process:

window.addEventListener('online', () => console.log('Online')) 
window.addEventListener('offline', () => console.log('Offline'))

From the main process:

const { net } = require('electron') console.log('Status:', net.isOnline())

Frequently Asked Questions about Events in Electron.js

• Can I cancel a navigation?
  • Yes: use event.preventDefault() in events like will-navigate.
• Do menu events execute in the main process?
  • Yes, although they can interact with the renderer's webContents.
• Are dom-ready and did-finish-load the same?
  • No: dom-ready fires when the DOM is ready; did-finish-load when the entire page has finished loading.
• How do I get the current WebContents?
  • const contents = win.webContents

✅ Conclusion

Controlling events in Electron.js is controlling the application.
As an educator and developer, I always emphasize this: understanding what happens and when it happens allows you to intercept navigation, use the menu as a functional extension, manage the lifecycle, and react to changes in the UI or the network. With this guide, you now have the foundation to work like a professional.

Next step, Update your project in Electron.js