Listening for Events
Off-chain subscriptions.
Listening for Events is a free Web3 & DApp Development Fundamentals lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web3 & DApp Development Fundamentals learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Consuming Events Off-Chain
Events are useless until something listens for them. Off-chain apps - web front-ends, bots, and indexers - subscribe to logs to react to on-chain activity.
Libraries like ethers.js and web3.js make this straightforward.
Listening with ethers.js
With ethers.js you attach a listener using contract.on(eventName, callback). The callback receives the decoded parameters plus the raw event object.
<code>contract.on('Transfer', (from, to, amount, event) => {
console.log(from, '->', to, amount.toString());
});</code>Querying Past Events
To read history rather than live events, use queryFilter with a block range. This returns an array of matching past logs.
<code>const logs = await contract.queryFilter('Transfer', 0, 'latest');
logs.forEach(l => console.log(l.args.amount.toString()));</code>Filtering by Indexed Value
Because some parameters are indexed, you can build a filter that only matches certain topics, for example transfers received by one address.
<code>const filter = contract.filters.Transfer(null, myAddress);
const received = await contract.queryFilter(filter);</code>Listening with web3.js
The web3.js library uses an event emitter pattern via contract.events.EventName(), with data and error callbacks.
<code>contract.events.Transfer({ fromBlock: 'latest' })
.on('data', (e) => console.log(e.returnValues))
.on('error', console.error);</code>WebSocket Providers
Live event subscriptions require a WebSocket connection (wss://), because HTTP providers cannot push updates. For one-off history queries an HTTP provider is fine.
<code>// const provider = new ethers.WebSocketProvider('wss://...');
// HTTP works for queryFilter, not for live .on()</code>Block Confirmations
An event can be reorged out if its block is replaced. Wait for several confirmations before treating an event as final, especially for value transfers.
<code>contract.on('Deposit', async (acct, amount, event) => {
await event.getTransactionReceipt();
// optionally wait N confirmations
});</code>Indexers and The Graph
For large dApps, a dedicated indexer such as The Graph ingests events and exposes a queryable GraphQL API. This scales far better than scanning logs in the browser.
Decoding Raw Logs
If you have raw logs, you can decode them with the contract's ABI using an interface. The signature hash in topic 0 identifies which event it is.
<code>const iface = new ethers.Interface(abi);
const parsed = iface.parseLog(rawLog);
console.log(parsed.name, parsed.args);</code>Avoiding Duplicate Handling
Listeners may receive the same event more than once across reconnects. Track processed log identifiers (transaction hash + log index) to keep handling idempotent.
<code>const key = event.transactionHash + ':' + event.logIndex;
if (seen.has(key)) return;
seen.add(key);</code>Cleaning Up Listeners
Remove listeners when a component unmounts to prevent memory leaks and duplicate handlers, using contract.off or removeAllListeners.
<code>function handler(from, to, amount) { /* ... */ }
contract.on('Transfer', handler);
// later:
contract.off('Transfer', handler);</code>Quick Check
Test your understanding of listening for events.
Recap
You learned how off-chain code listens for events:
contract.on()for live events,queryFilterfor history- Filters target indexed topics
- WebSocket providers are required for live subscriptions
- Wait for confirmations, deduplicate logs, and clean up listeners
- Indexers like The Graph scale event queries
Frequently asked questions
Is the “Listening for Events” lesson free?
Yes — the full text of “Listening for Events” is free to read here on the web, and the Web3 & DApp Development Fundamentals course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web3 & DApp Development Fundamentals course, upgrade to CoddyKit PRO.
What will I learn in “Listening for Events”?
Off-chain subscriptions. You practise Web3 & DApp Development Fundamentals with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web3 & DApp Development Fundamentals?
No prior experience is required. Web3 & DApp Development Fundamentals on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Listening for Events” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web3 & DApp Development Fundamentals lesson?
Yes. Every Web3 & DApp Development Fundamentals lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Declaring Events
- Indexed Parameters
- Listening for Events
- Events vs Storage