Polymer - Sự kiện
Sự kiện được sử dụng bởi các phần tử có thể giao tiếp với các thay đổi trạng thái của cây DOM với các phần tử mẹ và sử dụng các API DOM tiêu chuẩn để tạo, điều phối và lắng nghe các sự kiện. Cácannotated event listeners được Polymer sử dụng, định nghĩa trình xử lý sự kiện là các phần nhỏ của mẫu DOM và có thể được thêm vào DOM con bằng cách sử dụng chú thích onevent trong mẫu.
Thí dụ
Ví dụ sau đây thêm trình xử lý sự kiện có chú thích trong mẫu. Tạo một tệp có tên là index.html và đặt đoạn mã sau vào đó.
<!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 = "annotated-eventlistners.html">
</head>
<body>
<template id = "myapp" is = "dom-bind">
//tap event is part of gesture events that fires consistently across both mobile
//and desktop devices
<annotated-eventlistners on-tap = "myClick"></annotated-eventlistners>
</template>
<script>
var myval = document.querySelector('#myapp');
myval.myClick = function(e) {
console.log('Hello World!!!');
};
</script>
</body>
</html>Đầu ra
Để chạy ứng dụng, điều hướng đến thư mục dự án đã tạo và chạy lệnh sau.
polymer serveBây giờ hãy mở trình duyệt và điều hướng đến http://127.0.0.1:8000/. Sau đây sẽ là đầu ra.
Nhấp vào văn bản để xem kết quả trong bảng điều khiển như được hiển thị trong ảnh chụp màn hình sau.
Sự kiện tùy chỉnh
Các sự kiện tùy chỉnh có thể được kích hoạt bằng cách sử dụng hàm tạo CustomEvent tiêu chuẩn và phương thức DispatchEvent từ phần tử máy chủ.
Hãy xem xét ví dụ sau kích hoạt sự kiện tùy chỉnh từ phần tử máy chủ. Mở tệp index.html và thêm mã sau vào đó.
<!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>Bây giờ, hãy tạo một tệp khác có tên custom-event.html và bao gồm đoạn mã sau.
<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>Đầu ra
Chạy ứng dụng như được hiển thị trong ví dụ trước và điều hướng đến http://127.0.0.1:8000/. Sau đây sẽ là đầu ra.
Bây giờ hãy nhấp vào nút, mở bảng điều khiển và xem giá trị thực cho sự kiện tùy chỉnh như được hiển thị trong ảnh chụp màn hình sau.
Bây giờ chuyển sang "nhắm mục tiêu lại sự kiện", chỉ định mục tiêu của sự kiện nơi phần tử có thể được biểu diễn trong cùng phạm vi với phần tử lắng nghe. Ví dụ: mục tiêu có thể được coi là một phần tử trong tài liệu chính, trong khi sử dụng trình lắng nghe trong tài liệu chính, không phải trong cây bóng tối. Bạn có thể tham khảo chương tạo kiểu Polymer shadow dom để biết thêm giải thích và ví dụ.
Sự kiện cử chỉ
Sự kiện cử chỉ có thể được sử dụng cho các tương tác của người dùng, giúp xác định sự tương tác tốt hơn trên cả thiết bị cảm ứng và thiết bị di động. Ví dụ: sự kiện nhấn là một phần của các sự kiện cử chỉ kích hoạt nhất quán trên cả thiết bị di động và máy tính để bàn.
Bạn có thể tham khảo ví dụ về sự kiện cử chỉ được giải thích ở đầu chương này, sử dụng on-tap sự kiện thêm trình nghe sự kiện có chú thích trong mẫu.
Bảng sau liệt kê các loại sự kiện cử chỉ khác nhau.
| Sr.No. | Loại & Mô tả sự kiện | Tính chất |
|---|---|---|
| 1 | down Nó chỉ định rằng ngón tay / nút đã di chuyển xuống. |
|
| 2 | up Nó chỉ định rằng ngón tay / nút đã di chuyển lên. |
|
| 3 | tap Nó chỉ định sự xuất hiện của các hành động lên và xuống. |
|
| 4 | track Nó chỉ định sự xuất hiện của các hành động lên và xuống. |
|
Thí dụ
Ví dụ sau chỉ định việc sử dụng các loại sự kiện cử chỉ trong mẫu. Tạo một tệp có tên là index.html và đặt đoạn mã sau vào đó.
<!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>Bây giờ, hãy tạo một tệp khác có tên là cử chỉ-event.html và bao gồm đoạn mã sau.
<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: #D7D0B7;
}
</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>Đầu ra
Chạy ứng dụng như được hiển thị trong ví dụ trước và điều hướng đến http://127.0.0.1:8081/. Bây giờ bắt đầu kéo chuột trong phần tử, nó sẽ hiển thị trạng thái như trong ảnh chụp màn hình sau.
Sau khi kéo chuột trong phần tử, nó sẽ hiển thị tiến trình theo dõi sự kiện như thể hiện trong ảnh chụp màn hình sau.
Khi bạn ngừng kéo chuột, nó sẽ kết thúc sự kiện theo dõi trên phần tử như được hiển thị trong ảnh chụp màn hình sau.
