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

Tindakan dan peristiwa

Dokumentasi ini mencakup tindakan dan peristiwa untuk iklan, cerita, dan situs web AMP. Bacalah Tindakan dan peristiwa di email AMP untuk mengetahui format email AMP.

Atribut on digunakan untuk menginstal pengurus (handler) peristiwa pada elemen. Peristiwa-peristiwa yang didukung bergantung pada elemen.

Nilai untuk sintaksis adalah bahasa yang spesifik untuk domain sederhana dari formulir tersebut:

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

Lihat tabel di bawah ini untuk mengetahui deskripsi setiap bagian sintaks.

Sintaks Diperlukan? Deskripsi
eventName ya Ini adalah nama peristiwa yang diekspos elemen.
targetId ya Ini adalah ID DOM untuk elemen tersebut, atau target khusus yang telah ditentukan sebelumnya yang ingin Anda tindak lanjuti sebagai tanggapan atas peristiwa tersebut. Di dalam contoh berikut ini, targetId adalah ID DOM dari target amp-lightbox, photo-slides. 
<amp-lightbox id = "photo-slides"> </amp-lightbox>
<button on = "tap: photo-slides"> Tampilkan Gambar</button>
methodName tidak Ini untuk elemen dengan tindakan default (standar).

Ini adalah metode yang diekspos elemen target (dirujuk dengan targetId) dan ingin Anda eksekusi ketika peristiwa dipicu.

AMP mempunyai konsep tentang tindakan default yang dapat diterapkan elemen-elemen. Jadi, saat meniadakan methodName, AMP akan mengeksekusi metode default tersebut.
arg=value tidak Beberapa tindakan, jika didokumentasikan, mungkin menerima argumen. Argumen ditetapkan di dalam kurung di dalam notasi key=value. Nilai-nilai yang diterima adalah:
  • untai tanpa tanda kutip yang sederhana: simple-value
  • untai bertanda kutip: "string value" atau 'string value'
  • nilai-nilai Boolean: true atau false
  • angka: 11 atau 1.1
  • referensi dot-syntax untuk data peristiwa: event.someDataVariableName

Menangani beberapa peristiwa

Anda dapat mendengarkan beberapa peristiwa pada suatu elemen dengan memisahkan peristiwa dengan tanda titik koma ;.

Contoh: on="submit-success:lightbox1;submit-error:lightbox2"

Beberapa tindakan untuk satu peristiwa

Anda dapat mengeksekusi beberapa tindakan dalam urutan untuk peristiwa yang sama dengan memisahkan tindakan-tindakan tersebut menggunakan koma ','.

Contoh: on="tap:target1.actionA,target2.actionB"

Peristiwa dan tindakan yang ditentukan secara global

AMP menentukan sebuah peristiwa tap secara global bahwa Anda dapat mendengarkan elemen HTML apa pun (termasuk elemen AMP).

AMP juga menentukan tindakan hide, show, dan toggleVisibility secara global bahwa Anda dapat memicu elemen HTML apa pun.

Sebuah elemen hanya dapat diperlihatkan jika sebelumnya disembunyikan dengan tindakan hide atau toggleVisibility, atau dengan menggunakan atribut hidden. Tindakan show tidak mendukung elemen yang disembunyikan dengan display:none CSS atau layout=nodisplay AMP.

Contohnya, yang berikut ini mungkin dilakukan di AMP:

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

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

Peristiwa yang khusus untuk elemen tertentu

* - semua elemen

Peristiwa Deskripsi
tap Dipicu ketika elemen diklik/diketuk.

Elemen input

Peristiwa Deskripsi Elemen Data
change Dipicu ketika nilai elemen berubah dan diterapkan.

Properti data mencerminkannya dalam HTMLInputElement dan 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 Dipicu ketika nilai elemen berubah. Ini serupa dengan peristiwa change standar, namun hanya dipicu ketika telah lewat 300 milidetik sejak nilai input berhenti berubah. Elemen yang memicu peristiwa input. Sama dengan data peristiwa change.
input-throttled Dipicu ketika nilai elemen berubah. Ini serupa dengan peristiwa change standar, namun dipercepat untuk dipicu secara maksimal setiap 100 milidetik sementara nilai input berubah. Elemen yang memicu peristiwa input. Sama dengan data peristiwa change.

amp-accordion > bagian

Peristiwa Deskripsi Data
expand Dipicu ketika bagian akordeon meluas. Tidak ada.
collapse Dipicu ketika bagian akordeon menciut. Tidak ada.

amp-carousel[type="slides"]

Peristiwa Deskripsi Data
slideChange Dipicu ketika slide korsel (carousel) yang sedang aktif berubah. 
// Slide number.
event.index

amp-lightbox

Peristiwa Deskripsi Data
lightboxOpen Dipicu ketika lightbox (bingkai terang) terlihat sepenuhnya. Tidak ada
lightboxClose Dipicu ketika lightbox (bingkai terang) tertutup sepenuhnya. Tidak ada

amp-list

Peristiwa Deskripsi Data
changeToLayoutContainer Perbarui tata letak amp-list ke layout="CONTAINTER" untuk memungkinkan pengubahan ukuran dinamis.
fetch-error (kepercayaan rendah) Dipicu saat pengambilan data gagal. Tidak ada

amp-selector

Peristiwa Deskripsi Data
select Dipicu ketika suatu opsi dipilih atau tidak jadi dipilih. 
// Target element's "option" attribute value.
event.targetOption
// Array of "option" attribute values of all selected elements.
event.selectedOptions

amp-sidebar

Peristiwa Deskripsi Data
sidebarOpen Dipicu ketika bilah samping sepenuhnya terbuka setelah transisi berakhir. Tidak ada
sidebarClose Dipicu ketika bilah samping sepenuhnya tertutup setelah transisi berakhir. Tidak ada

amp-state

Peristiwa Deskripsi Data
fetch-error (kepercayaan rendah) Dipicu saat pengambilan data gagal. Tidak ada

amp-video, amp-youtube

Peristiwa Deskripsi Data
firstPlay(kepercayaan rendah) Dipicu saat video diputar pertama kali oleh pengguna. Pada video yang diputar otomatis, ini dipicu begitu pengguna berinteraksi dengan video. Peristiwa ini mempunyai tingkat kepercayaan rendah (low-trust), artinya tidak dapat memicu sebagian besar tindakan; hanya tindakan yang bisa dengan kepercayaan rendah yang dapat dijalankan, seperti tindakan amp-animation.
timeUpdate(kepercayaan rendah) Dipicu ketika posisi pemutaran sebuah video telah berubah. Frekuensi peristiwa dikendalikan oleh AMP dan saat berlangsung diatur pada interval 1 detik. Peristiwa ini mempunyai tingkat kepercayaan rendah (low-trust), artinya tidak dapat memicu sebagian besar tindakan; hanya tindakan yang bisa dengan kepercayaan rendah yang dapat dijalankan, seperti tindakan amp-animation. {time, percent}time mengindikasikan waktu saat berlangsung dalam detik, percent adalah angka di antara 0 dan 1 dan mengindikasikan posisi saat berlangsung sebagai persentase total waktu.

formulir

Peristiwa Deskripsi Data
submit Fired when the form is submitted.
submit-success Fired when the form submission response is success. 
// Response JSON.
event.response
submit-error Dipicu ketika respons pengiriman formulir mengalami eror. 
// Response JSON.
event.response
valid Dipicu ketika formulir valid.
invalid Dipicu ketika formulir tidak valid.

Tindakan yang khusus untuk elemen tertentu

* (semua elemen)

Tindakan Deskripsi
hide Menyembunyikan elemen target.
show Memperlihatkan elemen target. Jika sebuah elemen autofocus menjadi terlihat, maka elemen tersebut akan mendapatkan fokus.
toggleVisibility Mengalihkan atau mengubah visibilitas elemen target. Jika sebuah element autofocus menjadi terlihat, maka elemen tersebut akan mendapatkan fokus.
toggleClass(class=STRING, force=BOOLEAN) Mengalihkan kelas elemen target. force bersifat opsional, dan jika ditentukan akan memastikan kelas itu hanya akan ditambahkan, tetapi tidak dihapus jika diatur sebagai true, dan hanya dihapus, tetapi tidak ditambahkan jika diatur sebagai false.
scrollTo(duration=INTEGER, position=STRING) Menggulir elemen ke tampilan dengan animasi yang halus.
duration adalah opsional. Menentukan panjang animasi dalam milidetik. Jika tidak ditentukan, jumlah yang relatif terhadap perbedaan gulir di bawah atau setara dengan 500 milidetik akan digunakan.
position adalah opsional. Salah satu top, center atau bottom (top default). Menentukan posisi elemen relatif terhadap viewport setelah menggulir.
Sebagai praktik terbaik aksesibilitas, sandingkan ini dengan panggilan ke focus() untuk berfokus pada elemen yang sedang dituju.
focus Membuat elemen target mendapatkan fokus. Untuk menghilangkan fokus, focus pada elemen lain (biasanya elemen induk). Kami sangat menyarankan agar tidak menghilangkan fokus dengan berfokus pada body/documentElement demi keperluan aksesibilitas.

amp-audio

Tindakan Deskripsi
play Memutar audio. Tidak berfungsi (no-op) jika elemen <amp-audio> adalah turunan dari <amp-story>.
pause Menjeda audio. Tidak berfungsi (no-op) jika elemen <amp-audio> adalah turunan dari <amp-story>.

amp-bodymovin-animation

Tindakan Deskripsi
play Memutar animasi.
pause Menjeda animasi.
stop Menghentikan animasi.
seekTo(time=INTEGER) Mengatur currentTime animasi pada nilai yang ditentukan dan menjeda animasi.
seekTo(percent=[0,1]) Menggunakan nilai persentase yang diberikan untuk menentukan currentTime animasi pada nilai yang ditentukan dan menjeda animasi.

amp-accordion

Tindakan Deskripsi
toggle(section=STRING) Mengalihkan status expanded dan collapsed bagian amp-accordion. Jika dipanggil tanpa argumen, maka akan mengalihkan semua bagian akordeon. Picu pada bagian yang spesifik dengan menyediakan ID bagian: on="tap:myAccordion.toggle(section='section-id')".
expand(section=STRING) Memperluas bagian-bagian akordeon. Jika sebuah bagian telah diperluas, maka akan tetap luas. Jika dipanggil tanpa argumen, maka akan memperluas semua bagian akordeon. Picu pada bagian yang spesifik dengan menyediakan ID bagian: on="tap:myAccordion.expand(section='section-id')".
collapse(section=STRING) Menciutkan bagian-bagian akordeon. Jika sebuah bagian telah ciut, maka akan tetap ciut. Jika dipanggil tanpa argumen, maka akan menciutkan semua bagian akordeon. Picu pada bagian yang spesifik dengan menyediakan ID bagian: on="tap:myAccordion.collapse(section='section-id')".

amp-carousel[type="slides"]

Tindakan Deskripsi
goToSlide(index=INTEGER) Memajukan korsel (carousel) ke indeks slide yang ditentukan.
toggleAutoplay(toggleOn=true|false) Mengalihkan status putar otomatis korsel. toggleOn bersifat opsional.

amp-image-lightbox

Tindakan Deskripsi
open (default) Membuka lightbox (bingkai terang) gambar, di mana gambar sumber menjadi pemicu tindakan.

amp-lightbox

Tindakan Deskripsi
open (default) Membuka lightbox (bingkai terang).
close Menutup lightbox (bingkai terang).
Tindakan Deskripsi
open Membuka galeri lightbox. Dapat dipicu dengan mengetuk elemen lain jika Anda menentukan ID gambar: `on="tap:amp-lightbox-gallery.open(id='image-id')"`.

amp-list

Tindakan Deskripsi
refresh Menyegarkan data dari src dan merender ulang daftar.

amp-live-list

Tindakan Deskripsi
update (default) Memperbarui item DOM untuk memperlihatkan konten yang telah diperbarui.

amp-selector

Tindakan Deskripsi
clear Mengosongkan semua pilihan dari amp-selector yang telah ditentukan.
selectUp(delta=INTEGER) Menaikkan pilihan sesuai nilai `delta`. `delta` default ditetapkan pada -1. Jika tidak ada opsi yang dipilih, status yang dipilih akan menjadi nilai opsi terakhir.
selectDown(delta=INTEGER) Menurunkan pilihan sesuai nilai `delta`. `delta` default ditetapkan pada 1. Jika tidak ada opsi yang dipilih, status yang dipilih akan menjadi nilai opsi pertama.
toggle(index=INTEGER, value=BOOLEAN) Mengalihkan penerapan `selected` (terpilih). Jika atribut untuk memilih tidak ada, tindakan ini akan menambahkannya. Jika atribut untuk memilih ada, tindakan ini akan menghapusnya. Anda dapat memaksa dan mempertahankan serta menambahkan atau menghapus dengan menyertakan nilai Boolean di dalam argumen `value`. Sebuah nilai `true` akan memaksa untuk menambahkan atribut `selected` dan tidak akan menghapusnya jika memang sudah ada. Sebuah nilai `false` akan menghapus atribut tersebut, tetapi tidak akan menambahkannya jika tidak ada.

amp-sidebar

Tindakan Deskripsi
open (default) Membuka bilah samping (sidebar).
close Menutup bilah samping (sidebar).
toggle Mengalihkan status bilah samping (bilah samping).

amp-state

Tindakan Deskripsi
refresh Mengambil kembali data di atribut `src` dengan mengabaikan cache browser.

amp-user-notification

Tindakan Deskripsi
dismiss (default) Menyembunyikan elemen notifikasi pengguna yang menjadi referensi.

Elemen video

Tindakan di bawah ini didukung di dalam elemen video AMP berikut ini: amp-video, amp-youtube, amp-3q-player, amp-brid-player, amp-dailymotion, amp-delight-player, amp-ima-video.

Tindakan Deskripsi
play Memutar video.
pause Menjeda video.
mute Membisukan video.
unmute Menyuarakan video.
fullscreencenter Mengubah video ke layar penuh.

formulir

Tindakan Deskripsi
clear Mengosongkan nilai apa pun yang ada di dalam input formulir.
submit Mengirimkan formulir.

Target spesial

Yang berikut ini adalah target yang disediakan oleh sistem AMP yang mempunyai persyaratan spesial:

Target: AMP

Target AMP disediakan oleh runtime AMP dan menerapkan tindakan tingkat tinggi yang berlaku pada seluruh dokumen.

Tindakan Deskripsi
navigateTo(url=STRING, target=STRING, opener=BOOLEAN)

Menavigasikan jendela saat ini ke URL yang diberikan, ke target opsional yang telah ditentukan jika diberikan (saat ini hanya mendukung _top dan _blank ). Parameter opener yang opsional dapat ditentukan ketika menggunakan target _blank untuk memungkinkan halaman yang baru dibuka mengakses window.opener. Mendukung pengganti URL standar.

Peringatan: Menggunakan tautan normal <a> direkomendasikan jika memungkinkan karena AMP.navigateTo tidak dikenali oleh crawler web.
closeOrNavigateTo(url=STRING, target=STRING, opener=BOOLEAN)

Mencoba menutup jendela jika diizinkan, jika tidak, akan bernavigasi mirip Tindakan navigateTo. Berguna untuk kasus penggunaan di mana tombol “Back” (Kembali) mungkin perlu untuk menutup jendela jika dibuka di jendela baru dari halaman sebelumnya atau bernavigasi jika tidak dibuka.

Peringatan: Menggunakan tautan normal <a> direkomendasikan jika memungkinkan karena AMP.closeOrNavigateTo tidak dikenali oleh crawler web.
goBack Bernavigasi kembali dalam riwayat.
print Membuka Dialog Cetak (Print Dialog) untuk mencetak halaman yang sedang ditempati.
scrollTo(id=STRING, duration=INTEGER, position=STRING) Bergulir ke ID elemen yang disediakan pada halaman yang sedang ditempati.
optoutOfCid Menolak pembuatan ID Klien untuk semua cakupan.
setState({foo: 'bar'})1

Memerlukan amp-bind.

Menggabungkan objek secara literal ke dalam status yang dapat diikat.
pushState({foo: 'bar'})1

Memerlukan amp-bind.

Menggabungkan objek secara literal ke dalam status yang dapat diikat dan mendorong entri baru ke tumpukan riwayat browser. Memunculkan entri akan memulihkan nilai-nilai variabel sebelumnya (di dalam contoh ini, foo).

1Jika digunakan dengan beberapa tindakan, tindakan selanjutnya akan menunggu setState() atau pushState() selesai terlebih dahulu sebelum pemanggilan. Hanya satu di antara setState() atau pushState() yang diizinkan per peristiwa.

Target: amp-access

Target amp-access disediakan oleh komponen amp-access.

Target amp-access menjadi spesial karena alasan-alasan berikut ini:

  1. Anda tidak dapat memberikan ID sesuka hati untuk target ini. Targetnya selalu amp-access.
  2. Tindakan untuk amp-access bersifat dinamis sesuai dengan struktur Konfigurasi Akses AMP.

Lihat detail tentang menggunakan target amp-access.