CocosCreator3D插件教程(8)：给面板上的按钮绑定点击事件

在上节教程中，我们给插件面板添加了按钮，并且可以对按钮外观样式进行个性化设置。

那么我们该如何给按钮添加一个点击事件呢？

1.获取按钮元素

panel.js

exports.template = `
<button class="btn">
    按钮
</button>`;

exports.style = `
.btn{
    width:100px;
    height:100px;
}`;

exports.$ = {
    btn: '.btn', // 获取按钮元素 
}

通过$，我们可以很方便的拾取界面上的HTML元素，web老司机一看就明白怎么回事了，这里我简单解释下，更多技术细节，参考web前端技术相关教程：

• .可以拾取class元素

exprots.$ = { btn: '.btn'}

<button class="btn">按钮</button>

• #可以拾取id元素

exprots.$ = { btn: '#btn'}

<button id="btn">按钮</button>

2.给按钮绑定事件

panel.js

// ...
exports.ready = function () {
    this.$.btn.addEventListener('click', () => {
        console.log('点击按钮')
    })
}

这里必须在ready中获取HTML元素，直接使用html原生api，对按钮元素添加点击事件。

3. 点击按钮测试下

我们重新加载插件面板，刷新后，我们点击按钮，编辑器的控制台就会打印log

至此，我们就可以在插件面板中自由编写逻辑，写一些小插件工具。

有木有很激动？赶快试试吧！