کلیک جاوااسکریپت

با موارد کلیک جاوااسکریپت در این مقاله آشنا می شویم.

نکات اصلی کلیک جاوااسکریپت

• رویداد onclick JavaScript هنگامی رخ می دهد که کاربر روی عنصری کلیک کند.
• وقتی روی یک شی HTML که دارای ویژگی onclick است کلیک کنید ، یک خط کد مشخص اجرا می شود.
• توابع onclick جاوا اسکریپت را می توان توسط object.onclick یا object.addEventListener ایجاد کرد.
• روش addEventListener توسط نسخه های قبلی اینترنت اکسپلورر (8 و پایین) پشتیبانی نمی شود.

بررسی و استفاده از onclick

قطعه کد زیر نحو مناسب استفاده از رویداد onclick دکمه JavaScript را نشان می دهد. شما باید شی object مورد نظر برای تأثیرگذاری را مشخص کرده و عملکرد onclick را در JavaScript که می خواهید اجرا کنید نشان دهید.

نحو منظم: object.onclick = function () {my_script}؛

با استفاده از روش addEventListener: object.addEventListener (“کلیک کنید” ، my_script)؛

مثال تاریخ فعلی کلیک متن را نشان می دهد:

<button onclick="getElementById('test').innerHTML = Date()">This will show date when clicked.</button>

ببینید که چگونه این مثال با کلیک بر روی آن رنگ متن را تغییر می دهد:

function myFunction() {
    document.getElementById("test").style.color = "red";
}

کد در مثال بعدی نیز رنگ متن را تغییر می دهد ، اما این کار را با استفاده از روش کمی متفاوت انجام می دهد:

function myFunction(element,clr) {
    element.style.color = clr;
}

در مثال زیر ، متن را بر روی کلیک کپی کنید:

function myFunction() {
    document.getElementById("field2").value = document.getElementById("field1").value;
}

با کلیک کردن ، رنگ پس زمینه در پنجره ما تغییر می کند. روی مثال کلیک کنید:

window.onclick = myFunction;
function myFunction() {    
  document.getElementsByTagName("BODY")[0].style.backgroundColor = "lime";   
}

هنگام استفاده از کلیک

رویداد onclick جاوا اسکریپت یکی از پر استفاده ترین انواع رویدادهاست. این یک روش معمول است که وب سایت ها را با اضافه کردن برخی از قابلیت ها مانند کلیک دکمه JavaScript یا عناصر دیگر ، بهبود می بخشد.

تابع onclick جاوا اسکریپت برای اجرای کد در هنگام تعامل کاربران با عناصر HTML طراحی شده است. جاوا اسکریپت onclick را می توان برای هر عنصر HTML اعمال کرد.