Polymerjs事件处理详解 _事件

本文概述

添加事件监听器
添加带注释的事件侦听器
添加和删??除侦听器
自订活动
手势事件

Polymer元素使用Polymer事件与DOM树到父元素的状态变化进行通信。 Polymer使用标准的DOM API来创建, 调度和侦听事件。
Polymer使用带注释的事件侦听器, 并将它们定义为DOM模板的一小块。可以使用模板中的onevent批注将它们添加到DOM子级中。
添加事件监听器有两种添加事件侦听器的方法：
通过提供将事件映射到事件处理程序函数名称的侦听器对象, 可以将事件侦听器添加到主机元素。
也可以使用语法将事件侦听器添加到this。$集合中的任何元素中

nodeId.eventName.

例子

< dom-module id="x-custom"> < template> < div> I will respond< /div> < div> to a tap on< /div> < div> any of my children!< /div> < div id="special"> I am special!< /div> < /template> < script> Polymer({is: 'x-custom', listeners: {'tap': 'regularTap', 'special.tap': 'specialTap'}, regularTap: function(e) {alert("Thank you for tapping"); }, specialTap: function(e) {alert("It was special tapping"); }}); < /script> < /dom-module>

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

< dom-module id="x-custom"> < template> < button on-tap="handleTap"> Kick Me< /button> < /template> < script> Polymer({is: 'x-custom', handleTap: function() {alert('Ow!'); }}); < /script> < /dom-module>

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

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

注意：如果强制添加了侦听器, 则必须强制删除它。这通常在附加和分离的回调中完成。如果使用了侦听器对象或带注释的事件侦听器, Polymer会自动添加和删除事件侦听器。
自订活动你可以通过使用标准的CustomEvent构造函数和host元素中的dispatchEvent()方法来触发或触发自定义事件。
让我们举一个例子来触发来自host元素的自定义事件。创建一个文件名index.html并在其中使用以下代码。

< !doctype html> < html> < head> < title> Polymer Example< /title> < script src = "http://www.srcmini.com/bower_components/webcomponentsjs/webcomponents-lite.js"> < /script> < link rel = "import" href = "http://www.srcmini.com/bower_components/polymer/polymer.html"> < link rel = "import" href = "http://www.srcmini.com/custom-event.html"> < /head> < body> < custom-event> < /custom-event> < script> document.querySelector('custom-event').addEventListener('customValue', function (e) {console.log(e.detail.customval); // true})< /script> < /body> < /html>

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

< link rel = "import" href = "http://www.srcmini.com/bower_components/polymer/polymer-element.html"> //it specifies the start of an element's local DOM< dom-module id = "custom-event"> < template> < h2> Custom Event Example< /h2> < button on-click = "myClick"> Click Here< /button> < /template> < script> Polymer ({is: "custom-event", myClick(e) {this.dispatchEvent(new CustomEvent('customValue', {detail: {customval: true}})); }}); < /script> < /dom-module>

文章图片
现在, 单击” 单击此处” 按钮后, 你可以看到自定义事件的真实值。

文章图片
手势事件手势事件用于使触摸屏和移动设备上的用户交互更加愉悦。例如：点击事件是手势事件的一部分, 在移动设备和台式机设备上始终触发。
以下是支持的不同手势事件类型的列表：
表：

Index	Event type	Description	Properties
1)	down	下事件类型用于指定手指/按钮已下移。	x：提供事件的clientX坐标。 y：提供事件的clientY坐标。 sourceEvent：指定由DOM事件引起的按下动作。
2)	up	向上事件类型用于指定手指/按钮已向上移动。	x：提供事件的clientX坐标。 y：提供事件的clientY坐标。 sourceEvent：指定由DOM事件引起的向上动作。
3)	tap	点击事件类型用于指定向上和向下动作的发生。	x：提供事件的clientX坐标。 y：提供事件的clientY坐标。 sourceEvent：用于指定由DOM事件引起的点击动作。
4)	track	跟踪事件类型用于在手指/按钮按下时跟踪运动。	x：用于提供事件的clientX坐标。 y：用于提供事件的clientY坐标。 state：这是一个类型字符串, 用于指定跟踪状态。 dx：当你跟踪第一个事件时, 它会水平改变像素单位。 dy：当你跟踪第一个事件时, 它垂直改变像素。 ddx：跟踪最后一个事件时, 它会水平改变像素单位。 ddy：当你跟踪上一个事件时, 它会垂直改变像素数。 hover()：用于确定当前悬停的元素。

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

< !doctype html> < html> < head> < title> Polymer Example< /title> < script src = "http://www.srcmini.com/bower_components/webcomponentsjs/webcomponents-lite.js"> < /script> < link rel = "import" href = "http://www.srcmini.com/bower_components/polymer/polymer.html"> < link rel = "import" href = "http://www.srcmini.com/gesture-event.html"> < /head> < body> < gesture-event> < /gesture-event> < /body> < /html>

使用下面的代码创建另一个名为gesture-event.html的文件。

< link rel = "import" href = "http://www.srcmini.com/bower_components/polymer/polymer-element.html"> //it specifies the start of an element's local DOM< dom-module id = "gesture-event"> < template> < style> #box {width: 200px; height: 200px; background: pink; }< /style> < h2> Gesture Event Types Example< /h2> < div id = "box" on-track = "myClick"> {{track_message}}< /div> < /template> < script> Polymer ({is: 'gesture-event', myClick: function(e) {switch(e.detail.state) {case 'start':this.track_message = 'Tracking event started.'; break; case 'track':this.track_message = 'Tracking event is in progress. ' +e.detail.x + ', ' + e.detail.y; break; case 'end':this.track_message = 'Tracking event ended.'; break; }}}); < /script> < /dom-module>

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