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

Eylemler ve olaylar

Bu belgeleme web siteleri, hikayeler ve reklamlar için eylemleri ve olayları kapsar. AMP e-posta biçimi için AMP e-postasında eylemler ve olaylar sayfasını okuyun.

on özniteliği, öğelerde olay işleyicisi yüklemek için kullanılır. Desteklenen olaylar, öğelere bağlıdır.

Sözdiziminin değeri, formun etki alanına özgü basit bir dilidir:

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

Sözdiziminin her bir parçasının açıklamaları için aşağıdaki tabloya bakın.

Sözdizimi Gerekli mi? Açıklama
eventName evet Bu, bir öğenin gösterdiği olayın adıdır.
targetId evet Bu, öğe için bir DOM kimliği ya da olaya yanıt olarak üzerinde bir eylem yürütmek isteyeceğiniz ön tanımlı özel hedeftir. Aşağıdaki örnekte, targetId öğesi, amp-lightbox hedefi photo-slides için DOM kimliğidir. 
<amp-lightbox id="photo-slides"></amp-lightbox> <button on="tap:photo-slides">Resimleri Göster </button>
methodName hayır Varsayılan eylemleri olan öğeler içindir.

Bu sözdizimi, hedef öğenin (targetId ile referansı verilen) gösterdiği ve bir olay tetiklendiğinde yürütmek isteyeceğiniz yöntemdir.

AMP'nin öğelerin uygulayabileceği bir varsayılan konsepti vardır. Yani methodName çıkarıldığında, AMP bu varsayılan yöntemi uygulayacaktır.
arg=value hayır Bazı eylemler belgelenmişlerse, argüman kabul edebilirler. Argümanlar, key=value gösterimde parantez için tanımlanır. Kabul edilen değerler:
  • tırnak içinde olmayan basit metin dizeleri: simple-value
  • tırnak içindeki metin dizeleri: "string value" veya 'string value'
  • boole değerleri: true veya false
  • numbers: 11 veya 1.1
  • olay verilerine dot-syntax referansı: event.someDataVariableName

Birden fazla olayı işleme

Olayları noktalı virgül ; ile ayırarak bir öğede birden fazla olayı dinleyebilirsiniz.

Örnek: on="submit-success:lightbox1;submit-error:lightbox2"

Tek olay için birden fazla eylem

Eylemleri ',' virgül ile ayırarak aynı eylem için sıralı olarak birden fazla eylem yürütebilirsiniz.

Örnek: on="tap:target1.actionA,target2.actionB"

Genel olarak tanımlı etkinlikler ve eylemler

AMPher türlü HTML öğesinde (AMP öğeleri dahil) dinleyebileceğiniz bir tap olayını genel olarak tanımlar.

AMP ayrıca herhangi bir HTML öğesinde tetikleyebileceğiniz hide, show ve toggleVisibility eylemlerini de genel olarak tanımlar.

Bir öğe ancak önceden hide veya toggleVisibility eylemiyle gizlenmişse ya da hidden özniteliği kullanılmışsa gösterilebilir. show eylemi CSS display:none veya AMP'nin layout=nodisplay öğesi tarafından gizlenen öğeleri desteklemez.

Örneğin, aşağıdaki, AMP'de mümkündür:

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

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

Öğeye özgü olaylar

* - tüm öğeler

Olay Açıklama
tap Öğeye tıklandığında/dokunulduğunda tetiklenir.

Giriş öğeleri

Olay Açıklama Öğeler Veri
change Öğe değeri değiştirildiğinde ve bu değişiklik uygulandığında tetiklenir.

Veri özellikleri HTMLInputElement ve HTMLSelectElement sayfalarındakini kopyalar.

 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 Öğenin değeri değiştirildiğinde tetiklenir. Bu, standart change olayına benzer, ancak yalnızca giriş değerinin değişmesi durduktan sonra 300msn geçtiğinde tetiklenir. input olayını tetikleyen öğeler. change olayı verileriyle aynı.
input-throttled Öğenin değeri değiştirildiğinde tetiklenir. Bu standart change olayına benzer, ancak girişin değeri değişirken en fazla 100msn'de bir kez tetiklenir. input olayını tetikleyen öğeler. change olayı verileriyle aynı.

amp-accordion > bölüm

Olay Açıklama Veriler
expand Akordeon bölümü genişletildiğinde tetiklenir. Yok.
collapse Akordeon bölümü küçültüldüğünde tetiklenir. Yok.

amp-carousel[type="slides"]

Olay Açıklama Veriler
slideChange Döngünün geçerli slaytı değiştiğinde tetiklenir. 
// Slide number.
event.index

amp-lightbox

Olay Açıklama Veriler
lightboxOpen lightbox tam görünür olduğunda tetiklenir. Yok
lightboxClose lightbox tam kapalı olduğunda tetiklenir. Yok

amp-list

Olay Açıklama Veriler
changeToLayoutContainer Dinamik yeniden boyutlandırmaya izin vermek için amp-list yerleşimini layout="CONTAINTER" olarak günceller.
fetch-error(düşük güven) Veri getirilemediğinde tetiklenir. Yok

amp-selector

Olay Açıklama Veriler
select Bir seçenek seçildiğinde veya seçimi kaldırıldığında tetiklenir. 
// Target element's "option" attribute value.
event.targetOption
// Array of "option" attribute values of all selected elements.
event.selectedOptions

amp-sidebar

Olay Açıklama Veriler
sidebarOpen Geçiş sona erdikten sonra kenar çubuğu tamamen açıldığında tetiklenir. Yok
sidebarClose Geçiş sona erdikten sonra kenar çubuğu tamamen kapatıldığında tetiklenir. Yok

amp-state

Olay Açıklama Veriler
fetch-error(düşük güven) Veri getirilemediğinde tetiklenir. Yok

amp-video, amp-youtube

Olay Açıklama Veriler
firstPlay(düşük güven) Video, kullanıcı tarafından ilk kez oynatıldığında tetiklenir. Otomatik oynatılan videolarda, bu olay, kullanıcı videoyla etkileşime girer girmez tetiklenir. Bu olay düşük güvene sahiptir, yani çoğu eylemi tetikleyemez; yalnızca amp-animation eylemleri gibi düşük güvene sahip eylemleri çalıştırılabilir.
timeUpdate(düşük güven) Bir videonun oynatma konumu değiştiğinde kullanılır. Olayın sıklığı AMP tarafından kontrol edilir ve şu anda 1 saniyelik aralık şeklinde ayarlanmıştır. Bu olay düşük güvene sahiptir, yani çoğu eylemi tetikleyemez; yalnızca amp-animation eylemleri gibi düşük güven gerektiren eylemler çalıştırılabilir. {time, percent}time geçerli zamanı saniye cinsinden gösterir, percent 0 ile 1 arasında bir sayıdır ve geçerli konumu toplam zamanın yüzdesi olarak gösterir.

form

Olay Açıklama Veriler
submit Form gönderildiğinde teslim edilir.
submit-success Form gönderme yanıtı başarılı olduğunda tetiklenir. 
// Response JSON.
event.response
submit-error Form gönderme yanıtı bir hata verdiğinde tetiklenir. 
// Response JSON.
event.response
valid Form geçerli olduğunda tetiklenir.
invalid Form geçersiz olduğunda tetiklenir.

Öğeye özgü eylemler

* (tüm öğeler)

Eylem Açıklama
hide Hedef öğeyi gizler.
show Hedef öğeyi gösterir. Eğer autofocus öğesi sonuç olarak görünür olursa, odak kazanır.
toggleVisibility Hedef öğe görünürlüğünü açar veya kapatır. Eğer autofocus öğesi sonuç olarak görünür olursa, odak kazanır.
toggleClass(class=STRING, force=BOOLEAN) Hedef öğenin sınıfını değiştirir. force isteğe bağlıdır ve tanımlanırsa, sınıfın yalnızca true olarak ayarlandığında eklenmesini, ancak kaldırılmamasını ve yalnızca false olarak ayarlandığında kaldırılmasını sağlar.
scrollTo(duration=INTEGER, position=STRING) Bir öğeyi kaydırarak düzgün bir animasyonla görünür hale getirir.
duration isteğe bağlıdır. Animasyon uzunluğu milisaniye olarak belirtilir. Belirtilmezse, 500 milisaniyenin altındaki veya ona eşit kaydırma farkına göre bir miktar kullanılır.
position isteğe bağlıdır. top , center veya bottom (varsayılan top). Kaydırma işleminden sonra öğenin görünüm penceresine göre konumunu belirtir.
focus Hedef öğenin odak kazanmasını sağlar. Odağı kaybetmek için başka bir öğe üzerinde focus ile odaklanın (genelde ana öğeye). Erişilebilirlik hususlarından ötürü body/documentElement üzerine odaklanarak odağı kaybetmemenizi tavsiye ediyoruz.

amp-audio

Eylem Açıklama
play Sesi oynatır. <amp-audio> öğesi, <amp-story> alt öğesiyse işlem yapamaz.
pause Sesi duraklatır. <amp-audio> öğesi, <amp-story> alt öğesiyse işlem yapamaz.

amp-bodymovin-animation

Eylem Açıklama
play Animasyonu oynatır.
pause Animasyonu duraklatır.
stop Animasyonu durdurur.
seekTo(time=INTEGER) Animasyonun currentTime değerini belirtilen değere ayarlar ve animasyonu duraklatır.
seekTo(percent=[0,1]) Animasyonun currentTime değerini belirtilen değer olarak ayarlamak için verilen yüzde değerini kullanır ve animasyonu duraklatır.

amp-accordion

Eylem Açıklama
toggle(section=STRING) amp-accordion bölümlerinin expanded ve collapsed durumlarını değiştirir. Argüman olmadan çağrıldığında, akordeonun tüm bölümlerini değiştirir. Id bölümünü belirterek belirli bir bölümü tetikler:on="tap:myAccordion.toggle(section=
expand(section=STRING) Akordeonun bölümlerini genişletir. Bir bölüm zaten genişletilmişse, genişletilmiş olarak kalır. Argüman olmadan çağrıldığında, akordeonun tüm bölümlerini genişletir. Id bölümünü belirterek belirli bir bölümü tetikler:on="tap:myAccordion.expand(section='section-id')"
collapse(section=STRING) Akordeonun bölümlerini daraltır. Bir bölüm zaten daraltılmışsa, daraltılmış olarak kalır. Argüman olmadan çağrıldığında, akordeonun tüm bölümlerini daraltır. Id bölümünü belirterek belirli bir bölümü tetikler: on="tap:myAccordion.collapse(section='section-id')"

amp-carousel[type="slides"]

Eylem Açıklama
goToSlide(index=INTEGER) Döngüyü belirtilen bir slayt dizinine ilerletir.
toggleAutoplay(toggleOn=true|false) Döngünün otomatik oynatma durumunu değiştirir. toggleOn isteğe bağlıdır.

amp-image-lightbox

Eylem Açıklama
open (default) Kaynak görüntünün eylemi tetiklediği görüntü lightbox'ını açar.

amp-lightbox

Eylem Açıklama
open (default) Lightbox'ı açar.
close Lightbox'ı kapatır.
Eylem Açıklama
open Lightbox-gallery'yi açar. Göründü id belirtilmişse, başka bir öğeye dokunarak tetiklenebilir: `on="tap:amp-lightbox-gallery.open(id='image-id')"`.

amp-list

Eylem Açıklama
refresh Verileri src öğesinden yeniler ve listeyi yeniden işler.

amp-live-list

Eylem Açıklama
update (default) Güncellenmiş içeriği göstermek için DOM öğelerini günceller.

amp-selector

Eylem Açıklama
clear Tanımlanmış bir amp-selector bileşeninden tüm seçimleri temizler.
selectUp(delta=INTEGER) Seçimi `delta` değeri kadar yukarı taşır. Varsayılan `delta` -1 olarak ayarlanmıştır. Hiçbir seçenek seçilmezse, seçilen durum son seçeneğin değeri olur.
selectDown(delta=INTEGER) Seçimi `delta` değeri kadar aşağı taşır. Varsayılan `delta` 1 olarak ayarlanır. Hiçbir seçenek seçilmezse, seçilen durum ilk seçeneğin değeri olur.
toggle(index=INTEGER, value=BOOLEAN) `selected` uygulamasını değiştirir. Select özniteliği yoksa, bu eylem onu ekler. Select özniteliği mevcutsa, bu eylem onu kaldırır. `Value` argümanında bir boole değeri ekleyerek bir ekleme veya kaldırma işlemini zorlayabilir ve devam ettirebilirsiniz. `true` değeri, `selected` özniteliğini eklemeye zorlar ve zaten varsa kaldırmaz. `false` değeri özniteliği kaldırır, ancak yoksa eklemez.

amp-sidebar

Eylem Açıklama
open (default) Kenar çubuğunu açar.
close Kenar çubuğunu kapatır.
toggle Kenar çubuğu durumunu değiştirir.

amp-state

Eylem Açıklama
refresh Tarayıcı önbelleğini göz ardı ederken `src` özniteliğindeki verileri yeniden getirir.

amp-user-notification

Eylem Açıklama
dismiss (default) Başvurulan kullanıcı bildirim öğesini gizler.

Video öğeleri

Aşağıdaki eylemler, AMP video öğelerinde desteklenir: amp-video, amp-youtube, amp-3q-player, amp-brid-player, amp-dailymotion, amp-delight-player, amp-ima-video.

Eylem Açıklama
play Videoyu oynatır.
pause Videoyu duraklatır.
mute Videoyu sessize alır.
unmute Videonun sesini açar.
fullscreencenter Videoyu tam ekran yapar.

form

Eylem Açıklama
clear Formun girişlerindeki değerleri siler.
submit Formu gönderir.

Özel hedefler

Aşağıdakiler, AMP sistemi tarafından sağlanan ve özel gereksinimleri olan hedeflerdir:

Hedef: AMP

AMP hedefi AMP çalışma zamanı tarafından sağlanır ve belgenin tamamı için geçerli olan üst düzey eylemleri uygular.

Eylem Açıklama
navigateTo(url=STRING, target=STRING, opener=BOOLEAN)

Navigates current window to given URL, to the optional specified target if given (currenly only supporting _top and _blank ). The optional opener parameter can be specified when using a target of _blank to allow the newly opened page to access window.opener. Supports standard URL substitutions.

Caveat: Using normal <a> links is recommended wherever possible since AMP.navigateTo is not recognized by web crawlers.
closeOrNavigateTo(url=STRING, target=STRING, opener=BOOLEAN)

İzin veriliyorsa pencereyi kapatmaya çalışır, aksi takdirde navigateTo eylemine benzer şekilde hareket eder. Bir "Geri" düğmesinin, önceki sayfadan yeni bir pencerede açıldıysa pencereyi kapatmasını veya açılmamışsa hareket etmesini gerekebilecek durumlarda kullanışlıdır.

Caveat: Using normal <a> links is recommended wherever possible since AMP.closeOrNavigateTo is not recognized by web crawlers.
goBack Geçmişte geri gider.
print Geçerli sayfayı yazdırmak için Yazdır İletişim Kutusunu açar.
scrollTo(id=STRING, duration=INTEGER, position=STRING) Geçerli sayfada sağlanan öğe ID'sine ilerler.
optoutOfCid Tüm kapsamlar için İstemci ID oluşturmasından vazgeçer.
setState({foo: 'bar'})1

amp-bind gerektirir.

Değişmez bir nesneyi bağlanabilir durumuna bağlar.
pushState({foo: 'bar'})1

amp-bind gerektirir.

Değişmez bir nesneyi bağlanabilir durumuna bağlar ve yeni bir girişi tarayıcı geçmiş destesine gönderir. Girişi açmak, değişkenlerin önceki değerlerini geri getirecektir (bu örnekte, foo).

1Çoklu eylemlerle kullanıldığında, sonraki eylemler çağrı öncesinde tamamlanmak üzere setState() veya pushState() eylemini bekleyecektir. Olay başına sadece tek bir setState() veya pushState() eylemine izin verilir.

Hedef: amp-access

amp-access hedef, amp-access bileşeni tarafından sağlanır.

amp-access hedefi üç nedenden dolayı özeldir:

  1. Bu hedefe rastgele bir ID veremezsiniz. Hedef her zaman amp-access şeklindedir.
  2. amp-access eylemleri AMP Access Yapılandırması yapısına bağlı olarak dinamiktir.

amp-access hedefinin kullanımına dair ayrıntıları görüntüleyin.