srcmini本文概述
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 = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel = "import" href = "bower_components/polymer/polymer.html">
<link rel = "import" href = "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 = "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 = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel = "import" href = "bower_components/polymer/polymer.html">
<link rel = "import" href = "gesture-event.html">
</head>
<body>
<gesture-event></gesture-event>
</body>
</html>使用下面的代码创建另一个名为gesture-event.html的文件。
<link rel = "import" href = "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>输出
将鼠标悬停并拖动到元素中, 它将显示事件跟踪的进度, 如下所示：
当你停止拖动鼠标时, 它将在元素上结束跟踪事件, 如下所示：
评论前必须登录！
注册