📌  相关文章
📜  聚合物聚合物事件

📅  最后修改于: 2021-01-08 01:17:18             🧑  作者: Mango

聚合物事件

Polymer元素使用Polymer事件与DOM树到父元素的状态变化进行通信。 Polymer使用标准的DOM API来创建，调度和侦听事件。

Polymer使用带注释的事件侦听器，并将它们定义为DOM模板的小块。可以使用模板中的onevent批注将它们添加到DOM子级中。

添加事件监听器

有两种添加事件侦听器的方法：

通过提供将事件映射到事件处理程序函数名称的侦听器对象，可以将事件侦听器添加到主机元素。

也可以使用语法将事件侦听器添加到this。$集合中的任何元素中

nodeId.eventName.

例

添加带注释的事件侦听器

您可以通过使用模板中的事件注释将事件侦听器添加到本地DOM子级。通过使用此方法，您无需为元素指定绑定事件侦听器的ID。

例

添加和删除侦听器

listen()和unlisten()方法用于命令式添加和删除侦听器。

this.listen(this.$.myButton, 'tap', 'onTap');
this.unlisten(this.$.myButton, 'tap', 'onTap');

注意：如果必须添加侦听器，则必须强制删除它。这通常在附加和分离的回调中完成。

如果使用了侦听器对象或带注释的事件侦听器，Polymer会自动添加和删除事件侦听器。

自订活动

您可以通过使用标准的CustomEvent构造函数和host元素中的dispatchEvent()方法来触发或触发自定义事件。

让我们举一个例子来触发来自host元素的自定义事件。创建一个文件名index.html并在其中使用以下代码。



   
      Polymer Example

现在，创建另一个名为custom-event.html的文件，并在其中使用以下代码。


//it specifies the start of an element's local DOM

现在，单击“单击此处”按钮后，您可以看到自定义事件的真实值。

手势事件

手势事件用于使触摸屏和移动设备上的用户交互更加愉悦。例如：点击事件是手势事件的一部分，在移动设备和台式机设备上始终触发。

以下是支持的不同手势事件类型的列表：

表：

Index Event type Description Properties
1) down The down event type is used to specify that the finger/button has moved down. x: It provides the clientX coordinate for an event.
y: It provides the clientY coordinate for an event.
sourceEvent: It specifies the down action caused by DOM event.
2) up The up event type is used to specify that the finger/button has moved up. x: It provides the clientX coordinate for an event.
y: It provides the clientY coordinate for an event.
sourceEvent: It specifies the up action caused by DOM event.
3) tap The tap event type is used to specify the occurrence of up and down actions. x: It provides the clientX coordinate for an event.
y: It provides the clientY coordinate for an event.
sourceEvent: It is used to specify the tap action caused by DOM event.
4) track The track event type is used to track the movement while finger/button is down. x: It is used to provide the clientX coordinate for an event.
y: It is used to provide the clientY coordinate for an event.
state: It is a type string that specifies the tracking state.
dx: It horizontally makes the changes in pixels, when you track the first event.
dy: It vertically makes the changes in pixels, when you track the first event.
ddx: It horizontally makes the changes in pixels, when you track the last event.
ddy: It vertically makes the changes in pixels, when you track the last event.
hover(): It is used to determine the currently hovered element.

例

让我们以一个示例来演示手势事件类型在模板中的用法。创建一个名为index.html的文件，并在其中使用以下代码。



   
      Polymer Example

创建具有以下代码的另一个文件名为gesture-event.html。



//it specifies the start of an element's local DOM

输出：

将鼠标悬停并拖动到元素中，它将显示事件跟踪的进度，如下所示：

当您停止拖动鼠标时，它将在元素上结束跟踪事件，如下所示：