共计 1688 个字符，预计需要花费 5 分钟才能阅读完成。
概述
大屏事件配置是指用户与网页交互时触发的一种行为或动作，能够被 JavaScript 侦测并解决。包含在网页上的点击、拖动、键盘输入、鼠标挪动等操作；甚至还有一些高级事件，设置组件款式等。
在 JavaScript 中，事件能够通过事件处理程序（event handler）来解决。事件处理程序是一个函数，当事件产生时被调用。它能够被绑定到元素上，以便在事件产生时执行相应的操作。
性能阐明
在零碎中事件配置分三类：组件交互、根底事件、高级事件。
组件交互
组件交互是指一个管制组件传参给另外一个展现组件；即可实现一个交互动作。
案例一：工夫条件查问折线图展现
操作步骤如下：
- 在页面中，新增一个“自定义工夫选择器”；简略设置一下款式，设置一个默认值。
- 新增一个“折线图动画”，并为折线图设置好动态数据接口；【如何设置动态数据见上一篇数据配置】；
- 接着为“工夫选择器”设置组件交互事件；首先选中“工夫选择器”，单击“事件”标签；
- 在组件交互中，单击“新增”；配置关联组件；
- 触发事件设为抉择实现；绑定设为折线图动画；
- 最初，在关联指标组件申请参数中，设置参数值；startTs 设为开始工夫；endTs 设为完结工夫；
- 设置实现；最初保留并预览后果。
案例二：按钮实现多页面切换
操作步骤如下：
- 在页面中，新增两个“自定义按钮”；作为“第一页”和“第二页”。
- 随便新增 3 个组件，作为第一页，所需展现的内容；而后别离为组件的名称，减少“-1”标识符作为辨别第一页和第二页；设置好之后，将 3 个组件进行合并，选中 3 个组件，右键“创立分组”；并取名为“分组 -1”；代表是“第一页”的内容；
- 第一页的内容设置，并单击图层中的“暗藏”按钮；防止影响咱们设计“第二页”；
- 采纳雷同的办法，设计“第二页”；持续新增 3 个组件，作为第二页内容；同样别离为组件的名称，减少“-2”标识符作为辨别第一页和第二页；设置好之后，将 3 个组件进行合并，选中 3 个组件，右键“创立分组”；取名为“分组 -2”；代表是“第二页”内容；
- 第二页的内容设置，并单击图层中的“暗藏”按钮；
- 两个页面的内容设置结束；接着就是为组件绑定交互事件；
单击“第一页”按钮，
- 右侧“定制”区域中，找到“指标”，选中“分组 -1”；
- 右侧“事件”区域中，组件交互处，单击“新增”；触发事件抉择实现，绑定抉择任意一个后缀为“-1”的组件。
单击“第二页”按钮，
- 右侧“定制”区域中，找到“指标”，选中“分组 -2”；
- 右侧“事件”区域中，组件交互处，单击“新增”；触发事件抉择实现，绑定抉择任意一个后缀为“-2”的组件。
- 最初再检查一下，在图层治理中，默认显示“分组 -1”；暗藏“分组 -2”
- 设置实现；最初保留并预览后果。
页面切换第一局部：
页面切换第二局部：
根底事件
常见的根底事件包含单击、双击、鼠标进入、鼠标移出；用户能够别离在这些事件上面别离做一些自定义设置等。
案例一：鼠标进入时扭转背景色彩
操作步骤如下：
- 在页面中，新增一个“自定义按钮”组件；
- 接着为“自定义按钮”设置根底事件；首先选中“自定义按钮”，单击“事件”标签；
- 在“根底事件配置”中，单击“编辑”按钮；
- 在鼠标进入“mouseenter”事件中退出【mouseEvent.target.style.backgroundColor = “#ff0000”;】
- 在鼠标移出“mouseleave”事件中退出【mouseEvent.target.style.backgroundColor = “”;】
- 设置实现；最初保留并预览后果。
高级事件
高级事件是能够依据用户的非凡状况，自定义设置组件的款式以及各种成果。
案例一：轮播列表中退出动画成果
操作步骤如下：
- 在页面中，新增一个“轮播列表”组件；
- 接着为“轮播列表”设置高级事件；首先选中“轮播列表”，单击“事件”标签；
- 在“高级事件配置”中，单击“编辑”按钮；
- 在弹出的高级事件编辑器中，右侧零碎提供了局部案例；单击“介绍案例”；
- 找到“案例 8：增加【轮播列表】款式”，单击开展，获取代码；
- 将代码复制到左侧，” 渲染之后（vnodeMounted）” 中；
- 设置实现；最初保留并预览后果。
文章起源（首发地址）：ThingsKit 物联网平台
正文完
