方法和事件

方法通常是指通过组件元素的ID来调用该组件的方法去执行一些行为，例如 spz-lightbox 默认不在页面中展示，当我们想要它在页面中展示时，需要调用它的 open 方法来打开它。

事件通常是指当组件内执行了某种操作完成后，组件内自动抛出完成某种行为后的事件。我们可以监听该事件来在某些行为完成后做一些其他逻辑。例如当 spz-lightbox 打开后，可以通过监听 @open 事件来调用组件的方法或全局方法来实现一些逻辑。

用法

@eventName 通常用来监听元素的事件处理器。支持的事件取决于元素。

语法的值时一种简单的域特定语言，形式为：

@eventName="targetId.methodName[(arg1=value, arg2=value2, ...)]"

有关语法中各个部分的说明，请参见下表。

语法	描述	是否必需
eventName	元素公开的事件名称	是
targetId	元素的 DOM ID，或者是全局的 `SPZ` 对象	是
methodName	适用于具有默认方法的元素。这是由目标元素（`targetId` 引用）公开并且您要在事件被触发时执行的方法	是
arg=value	有些方法可以接受参数。这些参数的定义方式是使用括号将 `key=value` 表示法括起来，接受的值包括：带引号的字符串：`"string value"` 或 `'string value'` 布尔值：`true` 或 `false` 数值：`11` 或 `1.1` 以句点语法形式对事件数据的引用：`event` 或 `event.someDataPropertyName`	否

一个事件处理多个方法

使用分号（;）将各个方法分隔开，按顺序对同一事件执行多个方法。

@eventName="targetId.methodName(arg1=value);targetId2.methodName;"

全局定义的事件和方法

Lessjs 定义了全局 tap 事件，您可以在任何 HTML 元素（包括 Lessjs 元素或原生 HTML 元素）上监听事件。

Lessjs 还定义了全局 show、hide、scrollTo 和 toggleClass 方法，您可以在任何 HTML 元素上触发这些方法。

元素特有的事件

*-所有元素

事件	说明
tap	点击/点按元素时触发

输入元素

事件	说明	元素	数据
change	更改和提交元素时触发。	input	event.min event.max event.value event.valueAsNumber
		input[type="radio"] input[type="checkbox"]	event.checked
		select	event.min event.max event.value
input-debounced	在元素的值发生更改时触发。该事件与标准的 `change` 事件类似，但它仅在输入值停止更改并且经过 300ms 后才会触发。	可触发 `input` 事件的元素	与 `change` 事件数据相同
input-throttled	在元素的值发生更改时触发。该事件与标准的 `change` 事件类似，但它仅在输入值发生更改时每 100ms 最多触发一次。	可触发 `input` 事件的元素	与 `change` 事件数据相同

元素特有的方法

*(所有元素)

方法	说明
show	显示目标元素（移除目标元素的 `hidden` 属性）
hide	隐藏目标元素（给目标元素添加 `hidden` 属性）
toggleClass(class=string, force=boolean)	切换目标元素的类。`force` 为可选项，如果定义该属性，可确保在该属性设置为 `true` 时仅添加类而不移除类；在该属性设置为 `false` 时移除类而不添加类。
scrollTo(position=string, duration=integer, target-id=string)	将元素滚动到显示流畅的动画。`duration` 和 `target-id` 为可选项。`duration` 用于指定动画的时长（单位：毫秒）。如果未指定此属性，将使用相对于滚动差值不大于 500 毫秒的量。`target-id` DOM元素的 ID，用于指定滚动到某个元素的指定位置，如果未指定，默认元素在滚动后相对于视口的位置。`position` 可选值为 `top`、`center` 或 `bottom` 之一（默认值为 `top`）。
focus	使目标元素获得焦点。

示例：

<div class="buttons">
  <button @tap="text.show">Click to show</button>
  <button @tap="text.hide">Click to hide</button>
</div>

<div id="text" hidden>Show</div>

全局方法

全局的方法挂载在 SPZ 上，通过使用 SPZ.methodName 形式来调用。

方法	说明
copy(text=string)	将内容复制到粘贴板上。
scrollTo(id=string)	滚动到指定的元素位置。
replaceUrlState([customName=string], reload=boolean)	替换或添加URL参数。除了 `reload` 参数外，其余参数可以自定义。`reload` 为可选项，用于指定参数更新完后是否刷新页面。
navigateTo(url=string)	跳转到指定的页面。
postMessage(id=string, data=any)	给指定的 `iframe` 框架发送消息。

示例：

<button @tap="SPZ.copy(text='Enter content...')">Click button, Copy text</button>