JS宏进阶：控件与事件

在JS宏中，控件与事件是创建用户交互式应用程序的核心概念。与浏览器中的控件和事件有异曲同工之妙，在浏览器中，事件是用户与网页界面交互时发生的动作，而JS宏中，则是用户与WPS表格、文字等交互时发生的动作。

一、控件与窗体

控件是窗体上用于显示数据或接受用户输入的元素，而窗体是控件的容器，用于组织和显示用户界面。一个典型的窗体包含多个控件，这些控件共同为用户提供某种功能或信息展示。窗体可以基于用户操作显示或隐藏，可以承载其他控件如菜单、工具栏等。

1、常用控件介绍

文本框（TextBox）：用户可以在其中输入相关文本

标签（Label）：用于显示静态文本或图像

按钮（Button）：用于触发事件

复选框（CheckBox）：用于表示一个开关状态（选中或未选中）

选项按钮（OptionButton）：用于一组互斥的选项

组合框（ComboBox）：用于显示一个下拉列表供用户选择

列表框（ListBox）：用于显示一个项目列表，用户可以选择一个或多个项目（理论上是这样，但JS宏有bug，只能选择一个）

下图所示就是WPS编辑器中的控件栏：

此外，表格中也有控件栏，如图所示：

2、窗体简介

在wps编辑器的工程中选中窗体，右键可以新建用户窗体，如下图所示：

随后将我们需要的控件，拖入窗体中，即可对窗体进行手动布局，当然，也可以通过宏代码对窗体中的控件进行布局。

3、窗体与控件的属性

窗体与控件的属性，我们可以直接在WPS编辑器中进行查看，如下图所示：

上图中，我们选中的是整个窗体对象，所以属性编辑器中出现的是窗体的属性。如果需要修改其中的属性，我们可以直接手动的在属性编辑器中进行修改，或者通过宏代码进行修改。如上图中，需要修改窗体的Height属性，可以直接在属性编辑器中的对应位置进行输入，也可以执行下面代码：

inputBox.Height = 100

注意：不是所有的属性，都能通过宏代码进行修改，部分属性只允许读取，例如窗体的Caption属性等。对于只读属性，若是强行修改，会抛出异常。我们可以查询官方文档来查询哪些属性是只读属性。如下表所示：

此外，窗体中还有四个常用方法：

注意：如果在窗体中添加了控件，那么，窗体中会新增对应的属性，来访问这些控件对象，或者通过Controls方法来访问其中的控件对象，例如访问inputBox中的文本框控件：

let textBox = inputBox.TextBox1; //TextBox1是该文本框控件的名称，这样返回的就是该文本框控件对象
let tb = inputBox.Controls("TextBox1"); //返回的也是该文本框控件对象

另外，文档中，明确标注只读的属性，只允许通过宏代码进行访问读取，不允许修改。如果要修改只能通过属性编辑器手动的去修改。

二、基本事件概述

我们直接在wps编辑器中选择对应的事件，也可以手动编写事件函数

如下图所示：

注意，事件函数都是全局函数。另外，对于事件的说明，官方文档也有详细介绍：

1、事件分类

工作簿事件（workbook）：工作簿事件与工作簿对象的操作相关，例如打开、关闭、保存工作簿等。这些事件通常位于ThisWorkbook模块中。常见的工作簿事件包括（已标红）：

应用程序事件（Application）：应用程序事件与Excel应用程序级别的操作相关，例如创建新工作簿、关闭应用程序等。常用事件如下表所示（已标红）：

窗体事件（UserFrom）：用户窗体事件与用户窗体中的控件操作相关，例如按钮点击、文本框内容变化等。这些事件位于窗体的代码模块中。常见的用户窗体事件包括（已标红）：

控件事件：控件事件是通过窗体或工作表中的相关控件触发的，例如组合框事件、按钮事件等等。

详情请查阅官方网站：https://open.wps.cn/previous/docs/client/wpsLoad。下图红框中的控件事件都是常用事件。

2、事件函数的表示方法

事件函数是一个通过固定名称构成全局函数，通常已“事件类别_事件名称”来命名。例如：

//workbook中的Open事件
function Workbook_Open(){
    //打开工作簿时执行的代码
}


//窗体中按钮1的点击事件
function inputBox_CommandButton1_Click(){
    //点击窗体inputBox中按钮1要执行的代码
}

三、简单实例

function Workbook_BeforeClose(Cancel){
	MsgBox('<p> 要关闭吗？<strong style="color: red;">小主</strong>。</p>', jsYesNo, "关闭提示词");
}

上述事件表示工作簿关闭之前弹出消息框，效果图如下所示：