JavaScript ile Tıklama Nasıl Simüle Edilir?
JavaScript'te bir tıklama simülasyonu uygulamak için aşağıdaki yaklaşımlar uygulanabilir:
Yaklaşım 1: onclick Olayını Kullanarak Bir Tıklamayı JavaScript İle Simüle Edin
Bir ' tıklamada ” butonuna basıldığında olay meydana gelir. Bu yaklaşım, düğmeye tıklandığında bir işlevi çağırmak ve ' tıklama sayısı ” düğmesine her tıklandığında.
Kenar notu: Bir ' tıklamada ” olayı, belirli bir işleve eklenerek basitçe uygulanabilir.
Örnek
Aşağıdaki kod parçacığını gözden geçirin:
< merkez >
< h3 stili = 'arka plan rengi: açık mavi;' > Simüle tıklayın < açıklık sınıf = 'saymak' > açıklık > zamanlar h3 >
< düğme kimliği = 'btn1' tıklamada = 'tıklama sayısı()' > Beni tıkla ! buton >
merkez >
- Belirtilen başlığı bir “ ile birlikte ekleyin
artırmak için ” etiketi saymak tıklama sayısı. - Bir sonraki adımda, ekli bir düğme oluşturun ' tıklamada ” butonu tıklandığında erişilecek olan countClick() işlevine yönlendiren olay.
Şimdi aşağıdaki JavaScript kod satırlarını inceleyelim:
< senaryo >
tıklamalara izin ver = 0 ;
fonksiyon sayısıClick ( ) {
tıklamalar = tıklamalar + 1 ;
belge. sorgu seçici ( '.saymak' ) . Metin içeriği = tıklamalar ;
}
senaryo >
Kodun yukarıdaki js bölümünde:
- Burada öncelikle “ ile tıklamaları başlatınız. 0 ”.
- Bundan sonra, “adlı bir işlev bildirin. CountClick() ”. Tanımında, başlatılan ' değerini artırın. tıklamalar ' ile birlikte ' 1 ”. Bu, düğmeye her tıklandığında sayımın artmasına neden olur.
- Son olarak, “ açıklık “ öğesini kullanan öğe Document.querySelector() ' yöntem. Ayrıca, “ Metin içeriği Span öğesine daha önce tartışılan artırılmış tıklama sayısını tahsis etmek için ” özelliği.
Çıktı aşağıdaki gibi olacaktır:
Her tıklamada artırılan zamanlayıcının işlevselliği yukarıdaki çıktıda görülebilir.
Yaklaşım 2: AddEventListener() Yöntemi Yoluyla Bir Tıklamayı JavaScript İle Simüle Edin
“ addEventListener() ” yöntemi, bir öğeye bir olay işleyicisi tahsis eder. Bu yöntem, bir öğeye belirli bir olay ekleyerek ve kullanıcıyı olayın tetiklenmesi üzerine uyararak uygulanabilir.
Sözdizimi
eleman. addEventListener ( olay, işlev )Verilen söz diziminde:
- “ Etkinlik ” olay adını ifade eder.
- “ işlev ”, olay meydana geldiğinde yürütülecek işlevi işaret eder.
Örnek
Aşağıda verilen gösteri, belirtilen konsepti açıklamaktadır:
< merkez >< gövde >< bir href = '#' İD = 'bağlantı' > Linke tıklayınız a >
gövde > merkez >
< senaryo >
keçi olmak = belge. getElementById ( 'bağlantı' ) ;
almak. addEventListener ( 'Tıklayın' , ( ) => Alarm ( 'Simülasyonu tıklayın!' ) )
senaryo >
Yukarıdaki kodda:
- İlk olarak, bir “ Çapa Belirtilen bağlantıyı eklemek için ” etiketi
- Kodun JavaScript kısmında, oluşturulan bağlantıya “ Document.getElementById() ' yöntem.
- Son olarak, “ addEventListener() “Erişilen yöntem” bağlantı ”. “ Tıklayın ” Bu durumda, oluşturulan bağlantıya tıklandığında kullanıcıyı uyaracak olan olay eklenir.
Çıktı
Yaklaşım 3: Click() Yöntemini Kullanarak JavaScript ile Bir Tıklamayı Simüle Edin
“ Tıklayın() ” yöntemi, bir öğe üzerinde bir fare tıklaması simülasyonu gerçekleştirir. Bu yöntem, adından da anlaşılacağı gibi doğrudan ekli düğmelere bir tıklamayı simüle etmek için kullanılabilir.
Sözdizimi
eleman. Tıklayın ( )Verilen söz diziminde:
- “ eleman ”, tıklamanın yürütüleceği öğeyi işaret eder.
Örnek
Aşağıdaki kod parçacığı, belirtilen kavramı açıklar:
< merkez >< gövde >< h3 > Buldun mu Bu yararlı sayfa ? h3 >
< tıklama düğmesi = 'simulateClick()' İD = 'benzetmek' > Evet buton >
< tıklama düğmesi = 'simulateClick()' İD = 'benzetmek' > Hayır buton >
< h3 kimliği = 'kafa' stil = 'arka plan rengi: açık yeşil;' > h3 >
gövde > merkez >
- İlk olarak, belirtilen başlığı “
' etiket. - Bundan sonra, belirtilen id'ler ile iki farklı düğme oluşturun.
- Ayrıca, bir “ tıklamada ” olayı, her ikisi de simüleClick() işlevini çağırır.
- Bir sonraki adımda, belirtilen “ ile başka bir başlık ekleyin. İD ' kullanıcıyı en kısa sürede bilgilendirmek için ' Tıklayın ” simüle edilir.
Şimdi, aşağıda verilen JavaScript satırlarını gözden geçirin:
< senaryo >işlev simülasyonuClick ( ) {
belge. getElementById ( 'benzetmek' ) . Tıklayın ( )
izin ver = belge. getElementById ( 'kafa' )
almak. iç metin = 'Simülasyona tıklayın!'
}
senaryo >
- Bir işlev tanımlayın ' simüleClick() ”.
- Burada oluşturulan butonlara “ Document.getElementById() ” yöntemini seçin ve “ Tıklayın() ” yöntemi onlara.
- Şimdi, benzer şekilde, tahsis edilen başlığa erişin ve “ iç Metin Simüle edilmiş tıklama üzerine belirtilen mesajı bir başlık olarak görüntülemek için ” özelliği.
Çıktı
Yukarıdaki çıktıda, oluşturulan her iki düğmenin de tıklamayı simüle ettiği açıktır.
Bu blog, JavaScript kullanarak bir tıklama simülasyonunun nasıl uygulanacağını gösterir.
Çözüm
Bir ' tıklamada ” olay, “ addEventListener() ” yöntemi veya “ Tıklayın() ” yöntemi, JavaScript ile bir tıklamayı simüle etmek için kullanılabilir. Bir ' tıklamada ” olayı, bir sayaç şeklinde düğmeye her tıklandığında bir tıklamayı simüle etmek için uygulanabilir. “ addEventListener() ” yöntemi, bağlantıya bir olay eklemek ve kullanıcıyı tıklama simülasyonu üzerine bilgilendirmek için kullanılabilir. “ Tıklayın() ” yöntemi oluşturulan butonlara uygulanabilir ve butonların her biri için gerekli fonksiyonelliği gerçekleştirir. Bu yazı, JavaScript'te bir tıklama simülasyonunun nasıl uygulanacağını açıklar.