📌  相关文章
📜  Polymer-活动

📅  最后修改于: 2020-10-23 03:41:26             🧑  作者: Mango

 

元素可以使用事件，这些元素可以与DOM树到父元素的状态更改进行通信，并使用标准DOM API来创建，分配和侦听事件。带注释的事件侦听器由Polymer使用，它将事件侦听器定义为DOM模板的一小块，并可使用模板中的onevent注释将其添加到DOM子级中。

例

以下示例在模板中添加带注释的事件侦听器。创建一个名为index.html的文件，并将以下代码放入其中。

Polymer Example

输出

要运行该应用程序，请导航到创建的项目目录并运行以下命令。

polymer serve

现在打开浏览器并导航到http://127.0.0.1:8000/ 。以下将是输出。

聚合物注释的事件列表

单击文本以在控制台中查看结果，如以下屏幕截图所示。

聚合物注释的事件列表

自订活动

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

考虑下面的示例，该示例从host元素触发自定义事件。打开index.html文件，并在其中添加以下代码。

Polymer Example

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



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

输出

运行上一个示例中所示的应用程序，然后导航到http://127.0.0.1:8000/ 。以下将是输出。

聚合物定制活动

现在单击按钮，打开控制台，然后查看自定义事件的真实值，如以下屏幕快照所示。

聚合物定制活动

现在使用“事件重定目标”移动，它指定事件的目标，可以在与侦听元素相同的作用域中表示该元素。例如，目标可以被视为主文档中的元素，而在主文档中而不是在影子树中使用侦听器。您可以参考“ Polymer shadow dom样式”一章以获得更多说明和示例。

手势事件

手势事件可用于用户交互，从而在触摸和移动设备上定义更好的交互。例如，轻击事件是手势事件的一部分，可在移动设备和台式机设备上一致触发。

您可以参考本章开始时说明的手势事件示例，该示例使用点按事件在模板中添加带注释的事件侦听器。

下表列出了手势事件类型的不同类型。

Sr.No. Event Type & Description Properties
1 down

It specifies 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

It specifies 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

It specifies 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 specifies the tap action caused by DOM event.
4 track

It specifies 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.
  • 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

输出

运行上一个示例中所示的应用程序，然后导航到http://127.0.0.1:8081/ 。现在开始在元素中拖动鼠标，它将显示状态，如以下屏幕截图所示。

聚合物手势事件

在元素中拖动鼠标后，它将显示事件跟踪的进度，如以下屏幕截图所示。

聚合物手势事件

当您停止拖动鼠标时，它将结束元素上的跟踪事件，如以下屏幕截图所示。

聚合物手势事件