干货|捕捉智能合约中的event实战

关注

转载最新推荐文章于 2026-07-26 12:12:29 发布 2.4k 阅读 AI 写同款· GEO 优化 ›

Solidity 合约调试和event事件（2023版）目前主流的定义：事件是以太坊虚拟机(EVM)日志基础设施提供的一个便利接口。当被发送事件（调用）时，会触发参数存储到交易的日志中（一种区块链上的特殊数据结构）。这些日志与合约的地址关联，并记录到区块链中。换句话来说区块链是打包一系列交易的区块组成的链条，每一个交易“收据”会包含0到多个日志记录，日志代表着智能合约所触发的事件。event相当于solidity的日志存储成本上来说，event比storage更便宜event可以被客户端程序订阅使用emit触发event事件。阅读详情

1 写在前面

在上一篇文章 Web与智能合约交互实战中我们已经掌握如何使用 Web3 控制智能合约，并且实现了一个简单的Dapp，可以通过浏览器简单地实现数据的设置和读取。

在本文中，我们将介绍智能合约中的 event，以及如何捕捉智能合约的 event。

在实战环节中，我们将使用 Javascript API 捕捉一个 ERC20 合约中的 Transfer() 事件，并在网页中显示出合约中每个账户的余额。

2 智能合约中的event

event，顾名思义就是智能合约在执行过程中所发生的一系列事件，被记录在 EVM 的日志中，使得程序员可以在 Dapp 的前端页面上调用 Javascript 的回调函数。 event 由智能合约的编写者在代码中使用 event 关键词进行声明，示例如下：

event Deposit(
        address indexed _from,
        bytes32 indexed _id,
        uint _value
    );

当 event 被调用时，其中的参数会被存储在交易的日志当中，示例如下：

function deposit(bytes32 _id) public payable {
        // 这里是函数实际执行的代码

        // 激活Deposit事件，记录在日志中，保存在区块链上
        emit Deposit(msg.sender, _id, msg.value);
    }

3 捕捉 event

使用 Javascript API 可以* 捕捉* event，注意这里说捕捉是因为我们既可以实时监控事件，也可以从历史区块中检索 event。

首先将 event 实例化：

var event = myContractInstance.MyEvent({valueA: 23} [, additionalFilterObject])

在创建 event 实例的时候可以使用下面的参数：

Object：使用 filter 之后得到的索引返回值，例如，filter 可以是 {‘valueA’: 1, ‘valueB’: [myFirstAddress, mySecondAddress]}。默认情况下，所有 filter 的值是 null，这意味着这些值会匹配当前合约发送的任意类型的 event。
Object：额外的过滤条件，例如可以使用 fromBlock 和 toBlock 限定所要查询的区块的范围，详情可以参考 filter。
Function：如果将一个回调函数作为最后一个参数的话，就会立刻开始检索 event，所以没有必要再调用 myEvent.watch(function(){})。

完整的示例如下：

var MyContract = web3.eth.contract(abi);
var myContractInstance = MyContract.at('0x78e97bcc5b5dd9ed228fed7a4887c0d7287344a9');

// 使用一些参数捕捉 event
var myEvent = myContractInstance.MyEvent({some: 'args'}, {fromBlock: 0, toBlock: 'latest'});
myEvent.watch(function(error, result){
   ...
});

// 停止捕捉
myEvent.stopWatching();

4 捕捉 event 实战

在实战环节，我们将实现如何获得一个ERC20合约中，有多少地址拥有代币，以及每个地址有多少代币。

在 ERC20 标准合约中，有一个 event 定义如下：

event Transfer(address indexed from, address indexed to, uint tokens);

合约中每次执行 transfer() 函数的时候都会调用 Transfer() 事件，因此只需要使用 Javascript 捕捉 Transfer() 事件，就能获取到所有执行过交易的账户地址。之后使用 Web3 调用合约的 balanceOf() 方法就可以获取每个账户地址的 token 余额。

实现步骤如下：

启动 Ganache 测试环境；
在 Remix 中创建 ERC20 智能合约；
编写前端代码，与合约交互。

前两步关于如何使用 Ganache 搭建本地测试环境以及如何在 Remix 中创建合约的部分可以参见我的上一篇文章 Web与智能合约交互实战。这里将重点放在第三步。

创建UI

在 index.html 中，我们将创建基础的 UI，功能包括接收 token 的地址输入框，发送 token 数量的输入框（由于这里总是从默认账户发送 token，因此没有设置发送者的地址输入框），以及一个发送按钮，这些将通过 jQuery 实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <img id="loader" src="https://loading.io/spinners/double-ring/lg.double-ring-spinner.gif">
    <title>ERC20 Token Sample</title>

    <link rel="stylesheet" type="text/css" href="main.css">

    <script src="./node_modules/web3/dist/web3.min.js"></script>

</head>
<body>
    <div class="container">

        <h1>ERC20 Token</h1>

        <!-- <label for="name" class="col-lg-2 control-label">From</label>
        <input id="from" type="text"> -->

        <label for="name" class="col-lg-2 control-label">To</label>
        <input id="to" type="text">

        <label for="name" class="col-lg-2 control-label">Tokens</label>
        <input id="tokens" type="text">

        <button id="button">Send</button>

        <ol id="instructor"></ol>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

    <script>
        // 与智能合约的交互代码
        ......
    </script>

</body>
</html>

以及 main.css 文件设定基本的样式：

body {
    background-color:#F0F0F0;
    padding: 2em;
    font-family: 'Raleway','Source Sans Pro', 'Arial';
}
.container {
    width: 50%;
    margin: 0 auto;
}
label {
    display:block;
    margin-bottom:10px;
}
input {
    padding:10px;
    width: 50%;
    margin-bottom: 1em;
}
button {
    margin: 2em 0;
    padding: 1em 4em;
    display:block;
}

#instructor {
    padding:1em;
    background-color:#fff;
    margin: 1em 0;
}

.box div {
    padding:1em;
    background-color:#fff;
    margin: 1em 0;
}

捕捉 event 事件

这部分的主要代码如下：

<script>
    if (typeof web3 !== 'undefined') {
        web3 = new Web3(web3.currentProvider);
    } else {
        // set the provider you want from Web3.providers
        web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:7545"));
    }
    // 将Ganache创建的第一个账号当作默认账号
    web3.eth.defaultAccount = web3.eth.accounts[0];

    // 添加合约的ABI
    var tokenerc20Contract = web3.eth.contract([{"constant":true,"inputs":.....}]);   

    // 添加合约地址
    var tokenerc20 = tokenerc20Contract.at('0xdca44800d01ab7768902a11757b5ca1801a59efe');
    // 声明transfer事件，所要查找的区块数从0-latest
    var transferEvent = tokenerc20.Transfer({}, {fromBlock: 0, toBlock: 'latest'});
    // 通过前端进行token交易
    $("#button").click(function() {
        $("#loader").show();
        tokenerc20.transfer($("#to").val(), $("#tokens").val());
        });

    var holdersArray = new Array();
    // 查找所有Transfer事件
    transferEvent.watch(function(error, result){
        if (!error)
            {
                $("#loader").hide();

                // 判断From或者To的地址是否在holdersArray中出现
                var isFromExist = false;
                var isToExist = false;
                for (var i = 0; i < holdersArray.length; i++){
                    if (result.args.from == holdersArray[i]) {
                        isFromExist = true;
                    }
                    if (result.args.to == holdersArray[i]) {
                        isToExist = true;
                    }
                }

                // 找的新的账户地址，输出余额信息
                if (isFromExist == false) {
                    var holder = result.args.from;
                    holdersArray.push(holder);
                    var balanceOfHolder = tokenerc20.balanceOf(holder)
                    $("#instructor").append("<div>" + holder + ' has balance of ' + balanceOfHolder + "</div>");
                }
                if (isToExist == false) {
                    var holder = result.args.to;
                    holdersArray.push(holder);
                    var balanceOfHolder = tokenerc20.balanceOf(holder)
                    $("#instructor").append("<div>" + holder + ' has balance of ' + balanceOfHolder + "</div>");
                }
            } else {
                $("#loader").hide();
                console.log(error);
            }
    });
</script>