AMP
VI
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski

Hành động và sự kiện trong email AMP

Tài liệu này bàn về các hành động và sự kiện cho định dạng email AMP. Đọc Hành động và sự kiện cho các website, câu chuyện và quảng cáo trong AMP.

Thuộc tính on (bật) được sử dụng để cài đặt bộ xử lý sự kiện cho các yếu tố. Các sự kiện được hỗ trợ tùy thuộc vào yếu tố.

Giá trị cho cú pháp là một ngôn ngữ đơn giản dành riêng cho lĩnh vực của biểu mẫu:

eventName:targetId[.methodName[(arg1=value, arg2=value)]]

Xem bảng dưới đây để biết mô tả về từng phần của cú pháp.

Cú pháp Bắt buộc? Mô tả
eventName có Đây là tên của sự kiện được yếu tố hiển thị.
targetId có Đây là DOM ID cho yếu tố, hoặc một mục tiêu đặc biệt được định nghĩa sẵn mà bạn muốn thực thi một hành động hoặc để đáp lại sự kiện. Trong ví dụ sau, targetId là DOM ID của mục tiêu amp-lightbox, photo-slides.
<amp-lightbox id="photo-slides"></amp-lightbox> <button on="tap:photo-slides">Show Images</button>
methodName không Dành cho các yếu tố với hành động mặc định.

Đây là phương thức được yếu tố mục tiêu (tham chiếu bởi targetId) hiển thị và bạn muốn thực thi khi sự kiện được kích hoạt.

AMP có một khái niệm về một hành động mặc định mà các yếu tố có thể triển khai. Vậy nên khi bỏ sót methodName, AMP sẽ thực thi phương thức mặc định đó.
arg=value không Một số hành động, nếu được ghi chép, có thể chấp nhận các tham số. Các tham số được định nghĩa giữa các ngoặc đơn trong chú thích key=value. Các giá trị được chấp nhận là:
  • các chuỗi đơn giản không được trích dẫn: simple-value
  • các chuỗi được trích dẫn: "string value" hoặc 'string value'
  • các giá trị boolean: true (đúng) hoặc false (sai)
  • số: 11 hoặc 1.1
  • Tham chiếu cú pháp dấu chấm cho dữ liệu sự kiện: event.someDataVariableName

Xử lý nhiều sự kiện

Bạn có thể lắng nghe nhiều sự kiện trên một yếu tố bằng cách chia tách các sự kiện bằng dấu chấm phẩy ;.

Ví dụ: on="submit-success:lightbox1;submit-error:lightbox2"

Nhiều hành động cho một sự kiện

Bạn có thể thực thi nhiều hành động lần lượt cho cùng một sự kiện bằng cách chia tách các hành động với một dấu phẩy ','.

Ví dụ: on="tap:target1.actionA,target2.actionB"

Các sự kiện và hành động được định nghĩa toàn cục

AMP định nghĩa một sự kiện tap (chạm) trên toàn cục mà bạn có thể lắng nghe trên mọi yếu tố HTML (bao gồm các yếu tố AMP).

AMP cũng định nghĩa các hành động hide (ẩn), show (hiển thị) và toggleVisibility (bật/tắt hiển thị) trên toàn cục mà bạn có thể kích hoạt trên mọi yếu tố HTML.

Một yếu tố chỉ có thể được hiển thị nếu trước đó nó đã bị ẩn bởi một hành động hide hoặc toggleVisibility, hoặc bằng cách sử dụng thuộc tính hidden (ẩn). Hành động show (hiển thị) không hỗ trợ các yếu tố bị ẩn bởi display:none (hiển thị:không) của CSS hoặc layout=nodisplay (bố cục=không hiển thị) của AMP.

Ví dụ, những việc sau có thể được thực hiện trong AMP:

<div id="warning-message">Warning...</div>

<button on="tap:warning-message.hide">Cool, thanks!</button>

Các sự kiện cụ thể của yếu tố

* - tất cả yếu tố

Sự kiện Mô tả
tap Kích hoạt khi yếu tố được nhấn/chạm vào.

Yếu tố đầu vào

Sự kiện Mô tả Yếu tố Dữ liệu
change Kích hoạt khi giá trị của yếu tố được thay đổi và cam kết.

Thuộc tính dữ liệu sao chép các thuộc tính trong HTMLInputElement và HTMLSelectElement.

 input 
event.min
event.max
event.value
event.valueAsNumber
input[type="radio"],
input[type="checkbox"] 		event.checked
select 
event.min
event.max
event.value
input-debounced Kích hoạt khi giá trị của yếu tố được thay đổi. Điều này tương tự như sự kiện change (thay đổi) tiêu chuẩn, nhưng chỉ kích hoạt khi 300ms đã trôi qua sau khi giá trị của dữ liệu đầu vào đã ngừng thay đổi. Các yếu tố kích hoạt sự kiện input (nhập liệu). Giống như dữ liệu sự kiện change (thay đổi).
input-throttled Kích hoạt khi giá trị của yếu tố được thay đổi. Điều này tương tự như sự kiện change (thay đổi) tiêu chuẩn, nhưng bị hạn chế chỉ kích hoạt tối đa một lần sau mỗi 100ms trong khi giá trị của dữ liệu đầu vào đang thay đổi. Các yếu tố kích hoạt sự kiện input (nhập liệu). Giống như dữ liệu sự kiện change (thay đổi).

amp-accordion > phần

Sự kiện Mô tả Dữ liệu
expand Kích hoạt khi một phần accordion được mở rộng. Không có.
collapse Kích hoạt khi một phần accordion được thu hẹp. Không có.

amp-carousel[type="slides"]

Sự kiện Mô tả Dữ liệu
slideChange Kích hoạt khi slide hiện tại của băng chuyền được thay đổi. 
// Slide number.
event.index

amp-lightbox

Sự kiện Mô tả Dữ liệu
lightboxOpen Kích hoạt khi lightbox được hiển thị hoàn toàn. Không có
lightboxClose Kích hoạt khi lightbox được đóng hoàn toàn. Không có

amp-list

Sự kiện Mô tả Dữ liệu
fetch-error(low-trust) Kích hoạt khi truy xuất dữ liệu thất bại. Không có

amp-selector

Sự kiện Mô tả Dữ liệu
select Kích hoạt khi một tùy chọn được chọn hoặc bỏ chọn. 
// Target element's "option" attribute value.
event.targetOption
// Array of "option" attribute values of all selected elements.
event.selectedOptions

amp-sidebar

Sự kiện Mô tả Dữ liệu
sidebarOpen Kích hoạt khi thanh bên được mở hoàn toàn sau khi quá trình chuyển tiếp kết thúc. Không có
sidebarClose Kích hoạt khi thanh bên được đóng hoàn toàn sau khi quá trình chuyển tiếp kết thúc. Không có

amp-state

Sự kiện Mô tả Dữ liệu
fetch-error(low-trust) Kích hoạt khi truy xuất dữ liệu thất bại. Không có

form

Sự kiện Mô tả Dữ liệu
submit Kích hoạt khi biểu mẫu được gửi đi.
submit-success Kích hoạt khi gửi biểu mẫu thành công. 
// Response JSON.
event.response
submit-error Kích hoạt khi gửi biểu mẫu thất bại. 
// Response JSON.
event.response
valid Kích hoạt khi biểu mẫu là hợp lệ.
invalid Kích hoạt khi biểu mẫu là không hợp lệ.

Các hành động dành riêng cho yếu tố

* (tất cả yếu tố)

Hành động Mô tả
hide Ẩn yếu tố mục tiêu.
show Hiển thị yếu tố mục tiêu. Nếu một yếu tố autofocus (tự động lấy tiêu điểm) được hiển thị, nó sẽ được lấy tiêu điểm.
toggleVisibility Bật/tắt hiển thị yếu tố mục tiêu. Nếu một yếu tố autofocus (tự động lấy tiêu điểm) được hiển thị, nó sẽ được lấy tiêu điểm.
toggleClass(class=STRING, force=BOOLEAN) Bật/tắt lớp của yếu tố mục tiêu. force (bắt buộc) là tùy chọn, nhưng nếu được định nghĩa, nó đảm bảo lớp này chỉ được thêm mà không bị xóa nếu đặt thành true (đúng), và chỉ bị xóa nhưng không được thêm nếu đặt thành false (sai).
focus Lấy tiêu điểm vào yếu tố mục tiêu. Để bỏ tiêu điểm, focus (tập trung) vào một yếu tố khác (thường là yếu tố cha). Chúng tôi đặc biệt khuyến cáo không giảm tiêu điểm bằng cách tập trung vào body/documentElement vì lý do hỗ trợ tiếp cận.

amp-accordion

Hành động Mô tả
toggle(section=STRING) Bật/tắt trạng thái expanded (mở rộng) và collapsed (thu hẹp) của các phần amp-accordion. Khi được gọi mà không có tham số, nó sẽ bật/tắt tất cả các phần của accordion. Kích hoạt trên một phần cụ thể bằng cách cung cấp ID phần: on="tap:myAccordion.toggle(section=
expand(section=STRING) Mở rộng các phần của accordion. Nếu một phần đã được mở rộng rồi, nó vẫn sẽ được mở rộng. Khi được gọi mà không có tham số, nó sẽ mở rộng tất cả các phần của accordion. Kích hoạt trên một phần cụ thể bằng cách cung cấp ID phần: on="tap:myAccordion.expand(section=
collapse(section=STRING) Thu hẹp các phần của accordion. Nếu một phần đã được thu hẹp rồi, nó vẫn sẽ được thu hẹp. Khi được gọi mà không có tham số, nó sẽ thu hẹp tất cả các phần của accordion. Kích hoạt trên một phần cụ thể bằng cách cung cấp ID phần: on="tap:myAccordion.collapse(section=

amp-carousel[type="slides"]

Hành động Mô tả
goToSlide(index=INTEGER) Chuyển băng chuyền đến một thứ tự slide cụ thể.

amp-image-lightbox

Hành động Mô tả
open (default) Mở lightbox ảnh với ảnh nguồn là ảnh đã kích hoạt hành động này.

amp-lightbox

Hành động Mô tả
open (default) Mở lightbox.
close Đóng lightbox.

amp-list

Sự kiện Mô tả Dữ liệu
changeToLayoutContainer Cập nhật bố cục của amp-list thành layout="CONTAINTER" để cho phép đổi kích cỡ năng động.
fetch-error(low-trust) Kích hoạt khi truy xuất dữ liệu thất bại. Không có

amp-selector

Hành động Mô tả
clear Xóa tất cả các lựa chọn từ một amp-selector đã quy định.
selectUp(delta=INTEGER) Di chuyển lựa chọn về phía trước theo giá trị của `delta`. `delta` mặc định được đặt là -1. Nếu không có tùy chọn nào được chọn, trạng thái được chọn sẽ trở thành giá trị của tùy chọn gần nhất.
selectDown(delta=INTEGER) Di chuyển lựa chọn về phía sau theo giá trị của `delta`. `delta` mặc định được đặt là 1. Nếu không có tùy chọn nào được chọn, trạng thái được chọn sẽ trở thành giá trị của tùy chọn đầu tiên.
toggle(index=INTEGER, value=BOOLEAN) Bật/tắt mục `selected` (được chọn). Nếu không có thuộc tính được chọn, hành động này sẽ bổ sung nó. Nếu có thuộc tính được chọn, hành động này sẽ xóa nó. Bạn có thể bắt buộc và duy trì thêm hoặc xóa bằng cách thêm một giá trị boolean trong tham số `value` (giá trị). Một giá trị `true` (đúng) sẽ bắt buộc thêm thuộc tính `selected` (được chọn) và không xóa nó nếu nó đã được chọn. Một giá trị `false` (sai) sẽ xóa thuộc tính, và không thêm nó nếu nó không được chọn.

amp-sidebar

Hành động Mô tả
open (default) Mở thanh bên.
close Đóng thanh bên.
toggle Bật/tắt trạng thái của thanh bên.

form

Hành động Mô tả
clear Xóa mọi giá trị dữ liệu đầu vào của biểu mẫu.
submit Gửi biểu mẫu.

Mục tiêu đặc biệt

Sau đây là các mục tiêu được cung cấp bởi hệ thống AMP với các yêu cầu đặc biệt:

Mục tiêu: AMP

Mục tiêu AMP được cung cấp bởi thời gian chạy AMP và triển khai các hành động ở cấp độ cao nhất, áp dụng cho toàn tài liệu.

Hành động Mô tả
setState({foo: 'bar'})1

Yêu cầu amp-bind.

Hợp nhất một object literal vào một trạng thái ràng buộc được.

1Khi được sử dụng với nhiều hành động, các hành động sau đó sẽ chờ setState() hoàn thành trước khi kích hoạt. Chỉ một setState() được cho phép cho mỗi sự kiện.