tıklamada olay genellikle kullanıcı bir öğeye tıkladığında meydana gelir. Bir öğe tıklandığında programcının bir JavaScript işlevini yürütmesine olanak tanır. Bu olay bir formu, uyarı mesajlarını ve daha fazlasını doğrulamak için kullanılabilir.
JavaScript kullanılarak bu etkinlik herhangi bir öğeye dinamik olarak eklenebilir. hariç tüm HTML öğelerini destekler. , , , , , , , ,
, , Ve . uygulayamayacağımız anlamına gelir. tıklamada verilen etiketlerdeki etkinlik.
HTML'de şunu kullanabiliriz: tıklamada özellik ve atama JavaScript işlevi ona. Ayrıca JavaScript'i de kullanabiliriz. addEventListener() yöntem ve geçiş tıklamak Daha fazla esneklik için olayı ona göre ayarlayın.
Sözdizimi
Şimdi, kullanımın sözdizimini görüyoruz. tıklamada HTML'deki olay ve javascript (olmadan addEventListener() yöntemini kullanarak veya addEventListener() yöntem).
HTML'de
JavaScript'te
object.onclick = function() { myScript }; JavaScript'te addEventListener() yöntemini kullanarak
object.addEventListener('click', myScript);
Nasıl kullanılacağını görelim tıklamada Bazı illüstrasyonlar kullanarak olayı anlatın. Şimdi kullanım örneklerini göreceğiz. tıklamada HTML'de ve JavaScript'te olay.
Örnek1 - HTML'de onclick özelliğinin kullanılması
Bu örnekte, şunu kullanıyoruz: HTML tıklamada nitelik ve buna bir JavaScript işlevi atama. Kullanıcı verilen düğmeye tıkladığında ilgili işlev yürütülecek ve ekranda bir uyarı iletişim kutusu görüntülenecektir.
function fun() { alert('Welcome to the javaTpoint.com'); } <h3> This is an example of using onclick attribute in HTML. </h3> <p> Click the following button to see the effect. </p> Click me Şimdi Test Edin Çıktı
Verilen butona tıkladıktan sonra çıktı şu şekilde olacaktır:
Örnek2 - JavaScript'i Kullanmak
Bu örnekte JavaScript'i kullanıyoruz. tıklamada etkinlik. Burada şunu kullanıyoruz: tıklamada paragraf öğesiyle olay.
Kullanıcı paragraf öğesine tıkladığında karşılık gelen işlev yürütülür ve paragrafın metni değişir. Tıklandığında öğesi, metnin arka plan rengi, boyutu, kenarlığı ve rengi de değişecektir.
onclick event <h3> This is an example of using onclick event. </h3> <p> Click the following text to see the effect. </p> <p id="para">Click me</p> document.getElementById('para').onclick = function() { fun() }; function fun() { document.getElementById('para').innerHTML = 'Welcome to the javaTpoint.com'; document.getElementById('para').style.color = 'blue'; document.getElementById('para').style.backgroundColor = 'yellow'; document.getElementById('para').style.fontSize = '25px'; document.getElementById('para').style.border = '4px solid red'; } Şimdi Test Edin Çıktı
Metne tıkladıktan sonra Beni tıkla, çıktı şöyle olacaktır -
Örnek3 - addEventListener() yöntemini kullanma
Bu örnekte JavaScript'i kullanıyoruz. addEventListener() ekleme yöntemi tıklamak olayı paragraf öğesine aktarır. Kullanıcı paragraf öğesini tıklattığında paragrafın metni değişir.
Paragrafa tıklandığında öğelerin arka plan rengi ve yazı tipi boyutu da değişecektir.
<h3> This is an example of using click event. </h3> <p> Click the following text to see the effect. </p> <p id="para">Click me</p> document.getElementById('para').onclick = function() { fun() }; function fun() { document.getElementById('para').innerHTML = 'Welcome to the javaTpoint.com'; document.getElementsByTagName('body')[0].style.color = 'blue'; document.getElementsByTagName('body')[0].style.backgroundColor = 'lightgreen'; document.getElementsByTagName('body')[0].style.fontSize = '25px'; document.getElementById('para').style.border = '4px solid red'; } Şimdi Test Edin Çıktı
Metne tıklandığında Beni tıkla , çıktı şöyle olacaktır -
