📜  聚合物聚合物事件

📅  最后修改于: 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

   
   
   

输出:

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

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