Eric Bidelman has bundled lots of code snippets around change events that can get triggered in the browser:
Changes range from simple things like DOM mutations and catching client-side errors to more complex notifications like knowing when the user’s battery is about to run out. The thing that remains constant are the ways to deal with them: callbacks, promises, events.
Below are some of use cases that I came up with. By no means is the list exhaustive. They’re mostly examples for observing the structure of an app, its state, and the properties of the device it’s running on.
Great list imho! Here’s the snippet to listening for changes in network connectivity, for example:
// Online/offline events.
window.addEventListener('online', e => {
console.assert(navigator.onLine)
});
window.addEventListener('offline', e => {
console.assert(!navigator.onLine)
});
// Network Information API navigator.connection.addEventListener('change', e => {
console.log(navigator.connection.type, navigator.connection.downlinkMax);
});