Web3 & DApp Development Fundamentals · Урок

Прослушивание событий

Подписка на журналы

«Прослушивание событий» — бесплатный урок Web3 & DApp Development Fundamentals на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web3 & DApp Development Fundamentals, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web3 & DApp Development Fundamentals содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

What Are Events

Smart contracts emit events to log that something happened — a transfer, an approval, a vote. Events are written to the transaction's logs.

They are cheaper than storage.
Off-chain apps subscribe to them to stay in sync.

Events in the ABI

To decode events, ethers needs their definitions in the ABI:

const abi = [
  "event Transfer(address indexed from, address indexed to, uint256 value)",
];
const contract = new ethers.Contract(address, abi, provider);

The indexed keyword marks fields you can filter on.

const abi = [
  "event Transfer(address indexed from, address indexed to, uint256 value)",
];
const contract = new ethers.Contract(address, abi, provider);

Listening Live

Subscribe to new events with on. The callback fires whenever the event is emitted:

contract.on("Transfer", (from, to, value, event) => {
  console.log(from, "->", to, value);
});

This needs a provider that supports subscriptions, such as a WebSocket connection.

contract.on("Transfer", (from, to, value, event) => {
  console.log(from, "->", to, value);
});

WebSocket Providers

Live subscriptions work best over a persistent connection. Use a WebSocket provider:

const provider = new ethers.WebSocketProvider(
  "wss://mainnet.example-rpc.io/KEY"
);

HTTP providers can poll for events but a WebSocket pushes them in real time.

const provider = new ethers.WebSocketProvider(
  "wss://mainnet.example-rpc.io/KEY"
);

Listening Once

If you only care about the first occurrence, use once:

contract.once("Approval", (owner, spender, value) => {
  console.log("First approval seen");
});

The listener automatically removes itself after firing a single time.

contract.once("Approval", (owner, spender, value) => {
  console.log("First approval seen");
});

Querying Past Events

To read historical events, use queryFilter over a block range:

const logs = await contract.queryFilter(
  "Transfer",
  19000000,
  19000100
);
for (const log of logs) {
  console.log(log.args.from, log.args.value);
}

Each log exposes decoded args.

const logs = await contract.queryFilter(
  "Transfer",
  19000000,
  19000100
);
for (const log of logs) {
  console.log(log.args.from, log.args.value);
}

Filtering by Indexed Fields

Build a filter to match specific indexed values — for example transfers to one address:

const filter = contract.filters.Transfer(null, myAddress);
const logs = await contract.queryFilter(filter);

Passing null means match any value for that position.

const filter = contract.filters.Transfer(null, myAddress);
const logs = await contract.queryFilter(filter);

Live Filtered Listening

You can also pass a filter to on to react only to relevant events:

const filter = contract.filters.Transfer(null, myAddress);
contract.on(filter, (from, to, value) => {
  console.log("Received:", value);
});

This avoids processing events you do not care about.

const filter = contract.filters.Transfer(null, myAddress);
contract.on(filter, (from, to, value) => {
  console.log("Received:", value);
});

Removing Listeners

Long-running apps should clean up listeners to avoid leaks:

contract.off("Transfer", myHandler);
// or remove all listeners for an event
contract.removeAllListeners("Transfer");

Always remove listeners when a component unmounts or a job finishes.

contract.off("Transfer", myHandler);
// or remove all listeners for an event
contract.removeAllListeners("Transfer");

Handling Reorgs

Recent events can be reverted if the chain reorganizes. For reliable indexing:

Wait several confirmations before treating an event as final.
Track the block number and re-process if a reorg is detected.

This keeps your off-chain database consistent with the chain.

Provider-Level Log Filters

You can also subscribe at the provider level without a contract instance, using a raw log filter by topic:

provider.on({
  address: tokenAddress,
  topics: [ethers.id("Transfer(address,address,uint256)")],
}, (log) => {
  console.log("Raw log:", log);
});

This is lower-level but works across many contracts at once.

provider.on({
  address: tokenAddress,
  topics: [ethers.id("Transfer(address,address,uint256)")],
}, (log) => {
  console.log("Raw log:", log);
});

Quick Check

Test your understanding of event handling.

Recap

You learned to work with contract events.

Events log on-chain activity to transaction logs.
on subscribes live (best over a WebSocket provider); once fires a single time.
queryFilter reads historical events over a block range.
Build filters from indexed fields; pass null to match any.
Remove listeners to avoid leaks and wait for confirmations against reorgs.

Часто задаваемые вопросы

Урок «Прослушивание событий» бесплатный?

Да — полный текст урока «Прослушивание событий» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web3 & DApp Development Fundamentals, подпишись на CoddyKit PRO. Курс Web3 & DApp Development Fundamentals содержит 4 уроков всего.

Чему я научусь в уроке «Прослушивание событий»?

Подписка на журналы Ты практикуешь Web3 & DApp Development Fundamentals с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Web3 & DApp Development Fundamentals?

Предыдущий опыт не требуется. Web3 & DApp Development Fundamentals на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Прослушивание событий»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Web3 & DApp Development Fundamentals?

Да. Каждый урок Web3 & DApp Development Fundamentals включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Web3 & DApp Development Fundamentals