Bu eğitim, JavaScript ile onClick'in nasıl ayarlanacağına ilişkin prosedürü tanımlayacaktır.
JavaScript ile onClick Nasıl Ayarlanır
ayarlamak için tıklamada JavaScript ile iki farklı yöntem vardır:
- İlk yöntem, HTML öğesinin değerlerine bir değer atamaktır. tıklamada JavaScript kullanarak öznitelik.
- İkinci yöntem, HTML olayına açıkça kontrol eden bir olay dinleyicisi eklemektir. Tıklayın ' Etkinlik.
Örnek 1: JavaScript Kullanarak HTML Öğesinin tıklama Niteliğine bir Değer Atayın
HTML dosyasında bir başlık ve bir düğme oluşturun ' Beni tıkla 'kimliği ile' js ” üzerine tıklandığında JavaScript işlevini tetikleyecektir.
< h2 > Ayarlamak JavaScript ile onClick özelliği h2 >
< düğme kimliği = 'js' > Beni tıkla buton >
Bir sonraki adımda oluşturulan butona ulaşılacak ve “ tıklamada ” niteliği buna eklenecektir. Düğme tıklandığında, belirtilen işlev yürütülecek ve “ style.backgroundRenk ” özelliği buton rengini şu şekilde değiştirecektir:
belge. getElementById ( 'js' ) . tıklamada = işlev jsFunc ( ) {
belge. getElementById ( 'js' ) . stil . arka plan rengi = 'Mor' ;
}
İlgili çıktı şöyle olacaktır:
Örnek 2: HTML Etkinliğine Açıkça Bir Olay İşleyicisi Ekleme
Bir düğme oluştur ' Buraya Tıkla! ” ve bir kimlik atar” Etkinlik üzerinde addEventListener() yöntemini tetikleyecektir. 'Tıklayın' Etkinlik:
< düğme kimliği = 'Etkinlik' > Buraya Tıkla ! kuvvetli > buton kuvvetli >>
kullanarak düğmeyi getirin İD ve ardından bir ' addEventListener() ” yöntemi ile bir “ Tıklayın 'olay ve bir işlev' olayFunc ” butonun arka plan renginin değiştirileceği yer:
belge. getElementById ( 'Etkinlik' ) . addEventListener ( 'Tıklayın' , olayFunc ) ;fonksiyon eventFunc ( ) {
belge. getElementById ( 'Etkinlik' ) . stil . arka plan rengi = 'Yeşil' ;
}
Çıktı
Örnek 3: Tüm onClick Yöntemlerini Aynı Anda Kullanma
Bu örnekte, tüm yöntemlerin çalışması bir kerede görüntülenecektir. Birincisi, HTML etiketinin kendisine onclick niteliğini eklemenin varsayılan yoludur. Bundan sonra, JavaScript yardımıyla onclick niteliğini ayarlamanın iki yöntemi de gösterildi.
Aşağıdaki örnekte, üç düğme oluşturun ve onclick özniteliğinin işlevselliğini görün.
- İlk düğme ' Tıklamak 'arayacak' htmlFonk() ” tıklayın olayında.
- Düğme ' Beni tıkla ” atanan kimliği ile erişilecektir” js ” ve ardından JavaScript kullanarak düğmenin onclick özelliğine bir değer atayın.
- Düğme ' Buraya Tıkla! ” kimliği kullanılarak erişilecektir” Etkinlik ” ve ardından bir “ addEventListener() ” yöntemi ile:
< düğme kimliği = 'js' > Beni tıkla buton >< br >< br >
< düğme kimliği = 'Etkinlik' > Buraya Tıkla ! buton >
Aşağıdaki işlev “ tıklamada 'düğme olayı' Tıklamak ”:
işlev htmlFunc ( ) {Alarm ( 'HTML onClick olayı tarafından tıklanan düğme' ) ;
}
“ tıklandığında Beni tıkla ” butonuna bastığınızda, bir uyarı mesajının görüntüleneceği yerde aşağıdaki fonksiyon tetiklenecektir.
belge. getElementById ( 'js' ) . tıklamada = işlev jsFunc ( ) {Alarm ( 'JavaScript onClick işlevi tarafından tıklanan düğme' ) ;
}
Verilen fonksiyon “düğmesini tetikleyecektir. Buraya Tıkla! ”:
belge. getElementById ( 'Etkinlik' ) . addEventListener ( 'Tıklayın' , olayFunc ) ;fonksiyon eventFunc ( ) {
Alarm ( 'EventListener Yöntemi ile JavaScript onClick tarafından tıklanan düğme' ) ;
}
Çıktı, her düğmeye tıklandığında uyarı mesajları görüntüler:
Çözüm
JavaScript ile onclick'i ayarlamak için iki farklı yaklaşım vardır; birincisi, JavaScript kullanarak HTML öğesinin onclick niteliğine bir değer atamak ve ikinci yaklaşım, HTML olayına açıkça kontrol eden bir olay dinleyicisi eklemektir. Tıklayın ' Etkinlik. Bu öğretici, örneklerle birlikte JavaScript ile onClick'i ayarlama yöntemlerini tanımlamıştır.